CSS only: Two ways to reorder DIV elements / change their position

Sometimes you want to reorder <div>-container or other HTML elements, e.g. move an element that is on the bottom to the top in responsive design.

 

Here are two CSS only solutions to realize this realignment:

HTML source

 

Option 1 – use Flexbox

(Flexbox is not supported by IE version < 10 – check http://caniuse.com/#feat=flexbox)

 

Option 2 – use display:table

(display:table-… is supported by all modern browser – check http://caniuse.com/#search=table)

Leave a Reply

Your email address will not be published. Required fields are marked *