htmlcssflexboxflexboxgrid

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

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>

Solution

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