CodePen：如何以这种特定的顺序交换这些块，以响应？答案

【问题标题】：CodePen: How to swap these blocks in this specific order, in responsive?CodePen：如何以这种特定的顺序交换这些块，以响应？
【发布时间】：2018-12-12 20:36:00
【问题描述】：

考虑这 4 个块。

在 HTML 中，它们的顺序是这样的：首先，对应于红色块的分区，然后是橙色块，然后是黄色，最后是绿色。

在响应式中，这些块中的每一个都是width: 100%，因此它们以相同的顺序显示。

但是，我想以响应方式显示这样的块：红色、橙色、绿色、黄色等。

我如何仅使用 CSS 来解决这个问题？我可以使用弹性装箱布局。

#parent {
  width: 1400px;
  max-width: 100%;
  margin: auto;
}

#div_1, #div_2, #div_3, #div_4 {
  display: inline-block;
  width: 50%;
  padding: 100px;
  vertical-align: middle;
  box-sizing: border-box;
}

#div_1 {
  background: red;
  padding: 50px;
}

#div_2 {
  background: orange;
}

#div_3 {
  background: yellow;
}

#div_4 {
  background: green;
  padding: 50px;
}

@media screen and (max-width: 900px) {
  #div_1, #div_2, #div_3, #div_4 {
    width: 100%;
  }
}

<div id="parent">

  <div id="div_1"></div><!--
  --><div id="div_2"></div>

  <div id="div_3"></div><!--
  --><div id="div_4"></div>

</div>

这里是 CodePen：https://codepen.io/anon/pen/aPvyKZ

【问题讨论】：

标签： css flexbox responsive

【解决方案1】：

flexbox 和 order 可能

#parent {
  width: 1400px;
  max-width: 100%;
  margin: auto;
  display:flex; /* display:flex for use 'order' . */
  flex-wrap:wrap;
  align-items:center;
}

#div_1, #div_2, #div_3, #div_4 {
  display: inline-block;
  width: 50%;
  padding: 100px;
  vertical-align: middle;
  box-sizing: border-box;
}

#div_1 {
  background: red;
  padding: 50px;
  order:1; /* red is first */
}

#div_2 {
  background: orange;
  order:2; /* orange is second */
}

#div_3 {
  background: yellow;
  order:4; /* yellow is fourth */
}

#div_4 {
  background: green;
  padding: 50px;
  order:3; /* green is third */
}

@media screen and (max-width: 900px) {
  #div_1, #div_2, #div_3, #div_4 {
    width: 100%;
  }
}

<div id="parent">

  <div id="div_1"></div><!--
  --><div id="div_2"></div>

  <div id="div_3"></div><!--
  --><div id="div_4"></div>

</div>

【讨论】：

【解决方案2】：

将此添加到您的媒体查询中：

  #div_3, #div_4 {
    flex-direction: column-reverse;
  }

【讨论】：