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

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."

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 :)

The following code will sort your issue and according to caniuse.com is compatible with all browsers except for IE7 and below.

Full support on CSS table display can be found here

HTML

<div id="container">
    <div id="child1">1</div>
    <div id="child2">2</div>
</div>

CSS

#child2 {
    display:table-header-group;   
}
#child1 {
    display:table-footer-group;    
}