how to get a section to flex in a column-CodePudding

I'm working on media queries, im trying to go from a tablet view to a desktop view. I can only get one or the other right not both.

https://imgur.com/gallery/qcFtB8F The first image is supposed to be desktop view the second image is tablet view. I broke my code somewhere and now i cant get tablet view on my page. I'm stuck with also getting the desktop view.

<div >
  <section >
    <div >
      <div >
        <h2>Winter</h2>
      </div>
      <div >
        <div >
          <a href="winter.html">
            <img src="assets/images/winter.jpg" alt="Winter Image">
          </a>
        </div>
        <div >
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore         enim sequi dignissimos vel fugit
            reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui
            eaque.</p>
        </div>
      </div>
    </div>

css

@media screen and (min-width: 989px) {
    nav a {
    display: inline;
    flex-direction: left
  }

  .big-hero{
   height: 100vh;
  }

  .container{
    display: inline-block;
    flex-direction: column;

  }

}

@media screen and (min-width: 768px) {
  main {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  padding: 10px;
  gap: 1px -10px;

   }

    footer a{
     text-align: right;
     
     
   }

   .big-hero{
     height: 50vh;
   }

}

CodePudding user response：

I think the media queries are overlapping, to prevent them from overlapping try this way

@media (min-width: 768px) and (max-width: 987px)