В адаптивном макете столбца с 1 по 2 - как указать, должен ли DIV быть сложен в столбце 1 или столбце 2?

Question

На мобильном телефоне у меня есть 1 колонка DIV разных высот.Используя CSS, на больших экранах я бы хотел 2 столбца, с DIV, которые я определяю, расположенными в левом столбце, а остальные - в правом столбце (для каждого изображения ниже).Я думал, что div-class = "right" для некоторых и div-class = "left" для других.Есть ли способ сделать это с помощью поплавков или я должен пройти кладку?

https://imgur.com/a/Zalc0qO

Answer 1

Я бы также рекомендовал использовать flex;см. код ниже для примера.

.container {
  display:flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  width: 440px; 
  border: 2px solid red; 
}

.child {
  height: 200px; 
  width: 200px; 
  margin: 10px; 
  background: blue; 
  
}


  .child.left {
    background: green; 
  }

<div class="container">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="child left"></div>
</div>

Вот кодекс, с которым можно поиграть.Если вы измените ширину контейнера, вы увидите поведение.

CodePen

Answer 2

вы можете попробовать дисплей: flex.Должно работать.