Самый простой способ (который также является лучшей практикой) - заставить элементы div двигаться вниз при просмотре на мобильном телефоне / планшете / экранах меньшего размера

Question

Итак, я пытаюсь создать веб-сайт, и в настоящее время у меня есть боковой раздел и основной текст справа от этого. Как лучше всего перемещать правую основную часть текста ниже боковой части, чтобы при просмотре на небольших устройствах (мобильный планшет и т. Д. 1011 *).

так что, по сути, держите div 2 там, где он есть, и двигайте div на 6 + 8 + 9 + 10 ниже 2

Вот что у меня есть:

     <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;
}

Я не уверен, что это лучший способ сделать это, это будут медиа-запросы? Если так, что является лучшим способом сделать? если нет, то какие еще есть возможности? (Я переименовал свои div в числа, так как я хотел пока что сохранить их в тайне)

Answer 1

Используя flex, вы можете заказать ваши элементы так, как вам нравится sh. Объедините это с медиа реагирующим селектором CSS, таким как @media only screen and (max-width: XXXpx){}

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