CSS layout, use CSS to reorder DIVs

Given that the HTML

<div>
   <div id="content1"> content 1</div>
   <div id="content2"> content 2</div>
   <div id="content3"> content 3</div>
</div>

render as

content 1
content 2
content 3

My question:

Is there a way to render it as below by using CSS only without changing the HTML part.

content 1
content 3
content 2

From stackoverflow

• One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.

  nickf : XSLT would be massively over-the-top for this simple DOM manipulation task...

  Samir Talwar : True, but it would also be the best solution. All others require client-side scripting, which won't work in all cases.

  jcayzac : I don't quite understand the negative score of this comment. Yes, the question was about CSS, but Samir's answer provides the only reliable way to achieve the intended effect on every browser, even with Javascript disabled.

• It might not exactly match what you're after, but take a look at this question:
  CSS positioning div above another div when not in that order in the HTML

  Basically, you'd have to use Javascript for it to be reliable in any way.

  codemeit : I am in a situation of CSS only, anyway, what you said makes sense.

• I got it to work by doing this:

  #content2 { position:relative;top:15px; }
  #content3 { position:relative; top:-17px; }
  

  but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.

• http://www.pagecolumn.com/3_column_div_generator.htm

• This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.

• I was messing around in Firefox 3 with Firebug, and came up with the following:

  <div>
    <div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
    <div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
    <div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
  </div>
  

  It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.

  Hope it helps, nd

• If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.