Поменяйте местами div (столбцы потомков) в разных столбцах в адаптивном режиме

Question

У меня есть bootstrap column расположение, как указано ниже, и у меня есть несколько div с разными height внутри columns.

ЗДЕСЬ CODEPEN

.column>div {
  border: 1px solid #333;
  background: #ddd;
  color: white;
  padding: 15px;
  margin: 5px 0;
  text-align: center;
  font-size: 18px;
}

div#child-1 {
  height: 150px;
}

div#child-2 {
  height: 50px;
}

div#child-3 {
  height: 50px
}

div#child-4 {
  height: 100px;
}

div#child-5 {
  height: 100px;
}

div#child-6 {
  height: 150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 column">
      <div id="child-1">1</div>
      <div id="child-3">3</div>
      <div id="child-5">5</div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 column">
      <div id="child-2">2</div>
      <div id="child-4">4</div>
      <div id="child-6">6</div>
    </div>
  </div>
</div>

Когда речь идет о мобильных устройствах, мне нужно использовать col-xs-12 для каждого столбца.

Теперь мне нужно иметь следующую структурусформированный в отзывчивом #child-1, #child-2, #child-3, #child-4, #child-5, #child-6.

Но сейчас у меня есть шаблон, смешанный как #child-1, #child-3, #child-5, #child-2, #child-4, #child-6.

Как я могу поменять эти элементы на желаемое выравнивание?

Answer 1

Я думаю, что float может быть полезен для такой компоновки, тогда на маленьком устройстве вы можете переключиться на flexbox (или даже CSS-grid) и настроить порядок.Основной трюк заключается в том, чтобы все элементы были в одном контейнере, чтобы вы могли легко с ними справиться:

.container {
  max-width:1124px;
  margin:auto;
}
.column>div {
  border: 1px solid #333;
  background: #ddd;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
  font-size: 18px;
  box-sizing:border-box;
  width:calc(50% - 10px);
}

div#child-1 {
  height: 150px;
  float:left;
}

div#child-2 {
  height: 50px;
  float:right;
}

div#child-3 {
  height: 50px;
  float:left;
}

div#child-4 {
  height: 100px;
  float:right;
}

div#child-5 {
  height: 100px;
  float:left;
}

div#child-6 {
  height: 150px;
  float:right;
}

@media (max-width:767px) {
  .container {
    display:flex;
    flex-direction:column;
  }
  .column > div {
      width:auto;
  }
  #child-1 {order:1}
  #child-2 {order:2}
  #child-3 {order:3}
  #child-4 {order:4}
  #child-5 {order:5}
  #child-6 {order:6}
}

<div class="container column">
  <div id="child-1">1</div>
  <div id="child-2">2</div>
  <div id="child-4">4</div>
  <div id="child-3">3</div>
  <div id="child-6">6</div>
  <div id="child-5">5</div>
</div>