CODEWITHSUNDEEP
cssresponsive-designflexbox
OneSneakyMofo
OneSneakyMofo

Reputation: 1289

CSS Flexbox and Responsive Design: Converting 3 columns into 2 rows

I'm somewhat new to flexbox. I want to be able to take a three column layout and turn those three columns into two rows when they hit a smaller width in the browser.

For example:

Container
Col 1 | Col 2 | Col 3

turns into:

Container
Col 1 | Col 3
Col 2

Is this possible?

Upvotes: 0

Views: 3297

Answers (1)

2507rkt3
2507rkt3

Reputation: 21822

Yes you can do it, although it isn't very 'clean' per se.

Use a media query to change the flex-basis of the columns. So at a narrow width, the flex-basis would be %50, at a wide width, 33%.

Then use order to arrange the boxes as you wish.

Check it out: http://codepen.io/anon/pen/LvIni

Upvotes: 2

Related Questions