Flexbox stacked on small devices - css

Question

I have 3 row grid, which is like this
https://codepen.io/Ramlev/pen/pXaqdg
<div class="container">
<div class="first">asd</div>
<div class="second">asd</div>
<div class="third">asd</div>
</div>
and the stylesheet
.container {
display: flex;
flex-direction: row;
}
.first {
flex: 1 0 250px;
background-color: red;
height: 400px;
}
.second {
flex: 1 0 250px;
background-color: green;
height: 200px;
}
.third {
flex: 1 0 250px;
background-color: blue;
height: 200px;
}
But when i go to a smaller device, i want the third row to fall under second row, and keep those two stacked to the right of the first row.
Does that make any sense?

Answer 1

You can clean up your code to start with by removing the flex shrink of 0 and the 250px flex basis since you really want halves and thirds with no real minimum width. By adding another wrapper around columns 2 and 3 and using a media query, you can get exactly what you described.
The mobile first default style can be achieved if the first column and the wrapper of columns 2 and 3 both have flex grow set to 1.
Then, once the breakpoint is reached, set the flex-grow property of the wrapper to 2 so it will be twice as big as column 1 and set it to display flex so it stops stacking columns 2 and 3.
.container {
display: flex;
flex-direction: row;
}
.first {
flex: 1;
background-color: red;
height: 400px;
}
.wrapper {
flex: 1;
}
#media only screen and (min-width: 500px) {
.wrapper {
display: flex;
flex: 2;
}
}
.second {
flex: 1;
background-color: green;
height: 200px;
}
.third {
flex: 1;
background-color: blue;
height: 200px;
}
<div class="container">
<div class="first">asd</div>
<div class="wrapper">
<div class="second">asd</div>
<div class="third">asd</div>
</div>
</div>