Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Responsive Layouts Media Queries Creating Breakpoints

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,335 Points

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

1 Answer

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!

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