How can I reorder my divs using only CSS?

Question

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div

Answer 1

A solution with a bigger browser support then the flexbox (works in IE≥9):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

    

        Content to be below in this situation
    
    

        Content to be above in this situation
    

Other elements

In contrast to the display: table; solution this solution works when .wrapper has any amount of children.