如何重新排序DOM流

Question

我有以下布局问题。在移动设备上的一列中，4个块依次为a1、b1、a2、b2。在桌面上，我想得到a1，a2，b1-b2，这是a1，后面是a2，后面是b1-b2在同一行，但在a2下面。我本来希望使用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

Grid会更简单，但使用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演示

---

网格

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演示