FlexBox: 2 Elements on the same column while flex-direction column - html

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>