Can I use CSS to reverse the display order of two elements?

css, html

Solution

Yes, with flex boxes - http://jsfiddle.net/F8XMk/

#container{
  display: flex;    
  flex-flow: column;
}

#child1{
  order: 2;
}

#child2{
  order: 1;    
}

Newer browser support for flex is pretty good. You could also hack your way through it with negative margins :)

Problem

This sounds crazy, but bear with me. I'm writing a page that basically consists of the following: ``` <div id="container"> <div id="child1">...</div> <div is="child2">...</div> </div> ``` I want the page to appear different depending on whether it's being rendered for the screen or for printing, implemented through the magic of media queries. In particular, when printing, I want `#child2` to appear on the page before `#child1`. Is there any way I can swap their order without resorting to javascript, and preferably without nasty absolute positioning and whatnot? I should add, "before" in this context means "directly under."

Original source