CodePen：如何以响应的方式按特定顺序交换这些块？

Question

考虑这 4 个街区。

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

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

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

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

#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

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;
  }

CodePen：如何以响应的方式按特定顺序交换这些块？

CodePen: How to swap these blocks in this specific order, in responsive?

css

flexbox

responsive