I'm having a real hard time figuring out this CSS flexbox solution. Basically there are 2 issues, one with a 2-column and another with a 3-column layout.
2-Column:
This, I think, may be pretty straightforward:
3-Column:
This is probably a bit more advanced:
The container class is, well, .container
, and the children are just .left
, .right
, and .middle
. Not sure if it's relevant, but the width of .container
is 100% of viewport. I should probably add that using Bootstrap is not possible, due to reasons out of my control.
Here's how you do it for the three columns. I'm only adding that, because it's a bit more tricky:
And the fiddle http://jsfiddle.net/2touox81/
As you can see, you can set column order for flex items.
Hope this helps.