FlexBox: 2个元素在同一列，而flexdirection列

Question

我有一个包含3个元素的容器，它们的宽度为100%(25%，50%，25%)。如果容器小于800px，元素的顺序应该改变。#box2的宽度为100%。#box1和#box3的宽度都应该是50%，并且在同一列上。因此，最终的结果是，我应该有一个列的#box2为100%，第二个列的#box1和#box2为50%。如何使#box1和#box3在下面的代码中位于同一列?

JsFiddle(链接)

#container {
display: flex;
flex-direction: row;
max-width: 100vw;
width: 100%;
}
#box1 {
background: yellow;
width: 25%;
}
#box2 {
background: orange;
width: 50%;
}
#box3 {
background: red;
width: 25%;
}

/* Large Ansicht */
@media only screen and (max-width: 800px) {
#container {
flex-direction: column;
}
#box1 {
background: yellow;
width: 50%;
order: 2;
}
#box2 {
background: orange;
width: 100%;
order: 1;
}
#box3 {
background: red;
width: 50%;
order: 3;
}
}

<div id="container">
<div id="box1">sidemenu</div>
<div id="box2">app</div>
<div id="box3">sidemenu 2</div>
</div>

Answer 1

可以用flex-wrap: wrap;代替flex-direction: column;:

#container {
display: flex;
flex-direction: row;
max-width: 100vw;
width: 100%;
}
#box1 {
background: yellow;
width: 25%;
}
#box2 {
background: orange;
width: 50%;
}
#box3 {
background: red;
width: 25%;
}

/* Large Ansicht */
@media only screen and (max-width: 800px) {
#container {
flex-wrap: wrap;
}
#box1 {
background: yellow;
width: 50%;
order: 2;
}
#box2 {
background: orange;
width: 100%;
order: 1;
}
#box3 {
background: red;
width: 50%;
order: 3;
}
}

<div id="container">
<div id="box1">sidemenu</div>
<div id="box2">app</div>
<div id="box3">sidemenu 2</div>
</div>