How to make elements flow from bottom to top?

Question

Is there a way in CSS to get elements to behave like the picture on the right? The order of the elements isn\'t that important, but the tiles need to occupy the space from

Answer 1

The best solution I can think of using just CSS would be to employ media queries at specific breakpoints, and to devise 2-4 (depending on how many break points you want, it could be even more) desirable configurations.

Think of the desirable configurations, then you can give your content tiles specific id's to change their styles/widths at each breakpoint. E.g.,

  



    

      1
      2
      3
      4
      5
      6
      7
      8
      9
    

This technique would be fully manual, so might not work well for dynamic content unless you also wanted to leverage css-child-selectors, which for backwards compatibility might best be done using jQuery. But because, it's fully manual, it also gives you complete control over the progression.

As with Niels' solution, as presented, this wouldn't work below IE9 because media-query isn't supported.