Flexbox: Single Column to Stacked Multi-Column - css

Question

I encounter this layout issue a lot:
Small screens - items are stacked in a single row, usually an image followed by some text, then a smaller sub-area for extra miscellaneous:
Medium screens and up - items are reshuffled to 2 columns, image and misc stuff on the left, text on the right:
I feel like I should be able to do this with flexbox, but I can't figure out how. I get that I can arrange the items in columns using:
.container {
display: flex;
flex-flow: column wrap;
}
.one,
.two,
.three {
width: 50%;
}
.one {
order: 1;
}
.two {
order: 3;
}
.three {
order: 2;
}
But the problem is there doesn't seem to be a way to break the items into 2 columns without setting a fixed height, which obviously doesn't work too well for responsive.
Is there a way to force the columns to break at certain points?

Answer 1

You can do it like this. By making width 100% at mobile size. they take up their own line.
.container {
width: 75%;
margin: 0 auto;
}
.box1, .box2, .box3 {
width: 50%;
}
.box1 {
background-color: blue;
float:left;
}
.box2 {
background-color: green;
float: right;
}
.box3 {
background-color: purple;
float: left;
}
#media screen and (max-width: 800px) {
.box2 {
float: left;
}
.box1,.box2,.box3 {
width: 100%;
}
}
JSFIDDLE