I’ve been tearing my hair the last day to find a way to stack DIVs in multiple columns. I’m illustrating what I’m looking for with some images.

I’m trying to order DIVs with different content and size where you are recommended to read element in this order: One, Two, Three, Four, Five and Six. When you resize the screen (or read it on a smart phone) the DIVs are supposed to be stacked on top of each other in the same reading order. If the width of your screen only can show two columns you read One and two on the first row, three and four on the second and five and six on the last row.

My first idea is to just use float:left. Works kind of good. But only for the last column since it sets the height to all the other columns. Not so nice.

Then I tried to create 3 individual columns and put divs in each of them. This kind of works but you have to sort the DIVs in the wrong order in the HTML. And also the idea is that the DIVs should stack naturally when you make the window smaller. Well. Now they don’t. Too bad.

I searched for a while and found HNterest. They are positioning the DIVs absolute. Ok. So maybe I’ll resort to that? I’ll try that. Later.

Check my sample html and forge it on github as well.

Thanks to Adam for all help in this! I’m not sure what to do without you :)