FlexBox：同一列上有 2 个元素，而 flex-direction 列

Question

I have a container with 3 elements that together share a width of 100% (25%,50%,25%). If the container has less than 800px the order of the elements should be changed. #box2 has a width of 100%. #box1 and #box3 should both have a width of 50% and be on the same column. So as a final result I should have one column with #box2 at 100% and a second column with #box1 and #box2 at 50%. How do I get #box1 and #box3 to be in the same column in the code below?

JsFiddle (link)

 #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

You could replace flex-direction: column; with flex-wrap: wrap; :

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