在响应中的不同列中交换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>