CSS layout, use CSS to reorder DIVs


Given that the HTML

   <div id="content1"> content 1</div>
   <div id="content2"> content 2</div>
   <div id="content3"> content 3</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

Best Answer

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