It can be done! (Except in IE6 and IE7) No javascript or server side coding required.
You can reorder HTML elements with CSS alone using the display: table CSS property. It's really easy!
The HTML elements that you wish to reorder must be contained within an element.
The parent container is given the property display: table, and the child elements are given the properties display: table-header-group, display: table-row-group, or display: table-footer-group.
A contained element with the table-header-group display property will display above the other elements within the container element, regardless of the order of HTML.
A contained element with the table-row-group display property will display between the other elements within the container element, regardless of the order of HTML.
And contained element with the table-footer-group display property will display below the other elements within the container element, regardless of the order of HTML.
The best thing about this is that the elements can be any height at all, so no absolute positioning is required.
Example:
HTML:
<div id="container-div">
<div id="elem1">This is the <b>first</b> element</div>
<div id="elem2">This is the <b>second</b> element</div>
<div id="elem3">This is the <b>third</b> element</div>
</div>CSS:
#container-div { display: table; }
#elem1 {display: table-row-group; } /* Displays between the other elements */
#elem2 {display: table-footer-group; } /* Displays below the other elements */
#elem3 {display: table-header-group; } /* Displays above the other elements */HTML without CSS applied: