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

Think outside the box:

.container, .tile {
    transform:rotate(180deg);         /* Moz and IE10+ */
    -ms-transform:rotate(180deg);     /* IE9 */
    -webkit-transform:rotate(180deg); /* Opera/Chrome/Safari */
}

Yes, this really works:

.container {
  margin:10px;
  border:1px solid black;
  float:left;
  transform:rotate(180deg);
}
.tile {
  width:100px;
  height:64px;
  border:1px solid black;
  margin:5px;
  float:right;
  font-size: 40px;
  text-align: center;
  line-height: 64px;
  vertical-align: middle; 
  transform:rotate(180deg);
}

  1
  2
  3
  4
  5
  6
  7
  8
  9

First the container is rotated 180deg to get the desired layout, then float:right flips their left/right order, and then the tiles are rotated 180deg again to look as intended.