Re-order HTML blocks using CSS3 - Flexbox

Re-order HTML blocks using CSS3 - Flexbox

by Ayyappan Sakthivadivel

HTML

<div id="flex">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
</div>

CSS

#flex {
  width: 100%;
  float: left;
    display: flex;
    
}
#a {
  width: 100%;
  float: left;
    order: 1;
}
#b {
  width: 100%;
  float: left;
    order: 3;
}
#c {
  width: 100%;
  float: left;
    order: 2;
}