如何重新排序 DOM 流

Question

我有以下布局问题。在移动设备的一列中，4 个块依次为 a1、b1、a2、b2。 在桌面上，我想得到 a1,a2,b1-b2，即 a1 后跟 a2，然后在同一行但低于 a2 的 b1-b2。我希望使用 flexbox，但不知道该怎么做。

手机：

<div style='display:flex;flex-direction:column>
    <div id='a1'></div>
    <div id='b1'></div>
    <div id='a2'></div>         //each of these is 100VW
    <div id='b2'></div>
 </div>

桌面：

    <div id='a1'></div>      // the first two are 100vw
    <div id='a2'></div>
    <div id='b1'></div><div id='b2'></div>  //each of these would be 50vw

有没有办法用一个版本的html做到这一点，只修改css？

Answer 1

网格会更简单，但也可以使用 flexbox。

弹性

article {
  display: flex;
  flex-wrap: wrap;
}

#a1 { order: 1; }
#a2 { order: 2; }
#b1 { order: 3; }
#b2 { order: 4; }

div {
  flex: 0 0 100%;
  background-color: lightgreen;
  margin-bottom: 5px;
}

#b1, #b2 {
  flex: 1 0 34%; /* allows max 2 items per row, with ample space for margins */
}

#b2 {
  margin-left: 5px;
}

@media ( max-width: 500px) {
  article {
    display: block;
  }
  #b2 {
    margin: 0;
  }
}

<article>
  <div id='a1'>a1</div>
  <div id='b1'>b1</div>
  <div id='a2'>a2</div>
  <div id='b2'>b2</div>
</article>

jsFiddle demo

---

网格

article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  grid-template-areas:
    " a1 a1 "
    " a2 a2 "
    " b1 b2 "
}

#a1 {
  grid-area: a1;
}

#a2 {
  grid-area: a2;
}

#b1 {
  grid-area: b1;
}

#b2 {
  grid-area: b2;
}

@media (max-width: 500px) {
  article {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a1""b1""a2""b2";
  }
}

div {
  background-color: lightgreen;
}

<article>
  <div id='a1'>a1</div>
  <div id='b1'>b1</div>
  <div id='a2'>a2</div>
  <div id='b2'>b2</div>
</article>

jsFiddle demo