Easiest way (which is also best practice) to make div elements move down when viewing on mobile/tablet/lower screen sizes

Question

So I am trying to create a website and currently have a side section and the main body to the right of that. What is the best way to make the right main body of text move down below the side section so when viewing on smaller devices (mobile tablet etc).

so essentially keep div 2 where it is and move divs 6 + 8 + 9 + 10 down below 2

Here is what I have so far:

     <div class="1">
        <div class="2">
          <div class="3">
            <img src="" />
          </div>

          <div class="4">
            <h1>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </h1>
          </div>

          <div class="5">
            <h1>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </h1>
          </div>
        </div>

        <div class="6">              
            <h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <br />
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <br />
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           </h1>
        </div>

        <div class="8">
          <h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </h1>
        </div>
        <div class="9"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

    <div class="10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
    </div>
    </div>






And here is my css


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #BBBDC0;
}

.1 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin: 10%;

}

.2{
  grid-area: 1 / 1 / 7 / 2;
}

.6{
  grid-area: 1 / 2 / 3 / 6;
}

.8{
  grid-area: 3 / 2 / 5 / 6;
}

.9{
  grid-area: 5 / 2 / 7 / 6;
}

.10{
  grid-area: 7 / 2 / 8 / 5;
}

.2,
.6,
.8,
.9,
.10{
  border: 1px solid black;
  text-align: center;
}

I'm unsure which is the best way to do about this, would it be media queries? if so what is the best way to do? if not what are some other possibilities one could consider? (I renamed my divs to numbers as i wanted to keep them private for the time being)

Thanks to any contribution in advance anything is a help :)

Answer 1

Using flex, you can order your elements however you wish. Combine this with media responsive CSS selector such as @media only screen and (max-width: XXXpx){}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items