CodePen：在响应中如何按此特定顺序交换这些块？

Question

考虑这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>

以下是代码笔：https://codepen.io/anon/pen/aPvyKZ

Answer 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>

Answer 2

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

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