Switching the order of block elements with CSS
CSS:
#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}
HTML:
<div id="blockContainer">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>
And another one:
<!DOCTYPE html>
<html>
<head>
<title>foobar</title>
<style>
@media screen and (max-width:300px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:2;}
#c{order:1;}
#b{order:3;}
}
</style>
</head>
<body>
<div id="parent">
<div id="a">one</div>
<div id="b">two</div>
<div id="c">three</div>
</div>
</body>
</html>
Source:
https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css