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

Answer 1

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;    
}

Answer 2

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

Answer 3

You can make it this way:

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

Css for Display:

#child3 {display: none}

Css for Print:

#child1 {display: none}

Answer 4

No, there is no way to do this in pure CSS. CSS focuses on the presentation part, not the structure of the data that is being displayed.

The next best thing that comes to mind is having duplicate content:

<div class="child1 even">...</div>
<div class="child2 odd">...</div>
<div class="child1 odd">...</div>
<div class="child2 even">...</div>

and hiding the odd class in one view, evenin another.

It's not great, and it may come with SEO side-effects in some situations, I'm not sure.

It's the only way that comes to mind that doesn't involve server-side processing or JavaScript, though.