html - Rearrange divs through css -

html - Rearrange divs through css -

i have 3 3 kid div's class span2, span7 , span3 respectively. when browser width below 763px want in order span2, span3 , span7. how through css?

here initial code:

<div class="row-fluid"> <div class="span2"> </div> <div class="span7"> </div> <div class="span3"> </div> </div>

you accomplish using flexible boxes layout , flex order this:

jsfiddle - demo

class="snippet-code-css lang-css prettyprint-override">.row-fluid > div { width: 100px; height: 100px; border: 1px solid red; } @media (max-width: 763px) { .row-fluid { display: flex; flex-wrap: wrap; flex-direction: column; } .span2 { order: 1; } .span7 { order: 3; } .span3 { order: 2; } } class="snippet-code-html lang-html prettyprint-override"><div class="row-fluid"> <div class="span2">span2</div> <div class="span7">span7</div> <div class="span3">span3</div> </div>

html css