CSS layout, use CSS to reorder DIVs [duplicate]

Question

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 

Answer 1

This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.

See here

However, support for this is only in current versions of most browsers still.

Edit Time moves on and the flexbox support improves..

Answer 2

This works for me: http://tanalin.com/en/articles/css-block-order/

Example from this page:

HTML

<div id="example">   <div id="block-1">First</div>   <div id="block-2">Second</div>   <div id="block-3">Third</div> </div> 

CSS

#example {display: table; width: 100%; }  #block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */ #block-2 {display: table-row-group;    } /* Will be displayed in the middle */ #block-3 {display: table-header-group; } /* Will be displayed at the top */ 

As stated there, this should work in most browsers. Check link for more info.