Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Responsive Layouts Media Queries Creating Breakpoints

Posted by John Gu
John Gu
6,891 Points

Three column layout that is responsive

I want to create a layout that has three columns on a desktop, but one column on mobile (with the content of the desktop version stacked on top of each other). Sounds easy, right? The thing is, I want the mobile version to be such that the middle column (of the desktop version) shows up on TOP of the stack and followed by the other columns.

So the desktop version looks like this: [1][2][3]

I want the mobile version to look like this: [2] [1] [3]

What's the best practice way to do this? I can't think of a good way to set this up if the columns are inline-blocks or floats. And I want to avoid using absolute positioning, if I can.

Bogdan Cabaj
Bogdan Cabaj
16,349 Points
Bogdan Cabaj
Bogdan Cabaj
16,349 Points

Take a look at flexbox. I believe you can move around divs anyway in any way you want to.

1 Answer

Eric Butler
Eric Butler
33,512 Points

Sitian, Yes, flexbox can do this for you, but you can also use more universally-compliant floats to achieve this if you get creative -- no position required. Here's a solution I did on CodePen: http://codepen.io/ericbutler555/pen/WRLvKm?editors=1100#0

Let me know if it doesn't make sense. My advice is to start by thinking how to write your HTML and CSS for mobile, then think how it can be manipulated for wider screens. When you do that, it becomes clear that column #2 has to the first column in your HTML, so it can stack first on mobile. Then you have to think how to make things sort left or right when they're side by side, so you realize you can do that with float and since column 2 needs to be to the right of column 1, you can use float:right so they stack right-to-left. But you want column 3 to still come after those first 2 columns, so you realize if you wrapped columns 1 and 2 in a containing div, you can have those 2 float right but have that container and column 3 float left, and you're home-free.

Make sense? Hope this helps!

John Gu
John Gu
6,891 Points

Thank you, this elegant solution is what I was looking for.