jquery - I want to re order the divs in Bootstrap on mobile view -

<div class="col-lg-4 col-xs-12" style="background-color:#36f;height:150px;">first section</div> <div class="col-lg-8 col-xs-12" style="background-color:#f30;height:150px;">second section</div>  <div class="col-lg-4 col-xs-12" style="background-color:#f90;height:150px;">third column</div> <div class="col-lg-8 col-xs-12 col-xs-pu11-12"style="background-color:#cf0;height:150px;">fourth column</div> 

on mobile view want fourth column should appear on top , column first should appear @ last

assuming you're using latest version of bootstrap, can use "push" , "pull" modifier classes, so:

<div class="row">   <div class="col-md-9 col-md-push-3">     ...   </div>   <div class="col-md-3 col-md-pull-9">     ...   </div> </div> 

resources:

• http://www.getbootstrap.com/css/#grid-column-ordering