Column Reordering in Bootstrap

<div class="container text-center"> <p>2 is pushed above 1 and 3 on small screens</p> <div class="row"> <div class="well well-lg clearfix"> <div class="col-xs-12 col-md-4 col-md-push-4"> <div class="alert alert-warning"> 2 </div> </div> <div class="col-xs-6 col-md-4 col-md-pull-4"> <div class="alert alert-info"> 1 </div> </div> <div class="col-xs-6 col-md-4"> <div class="alert alert-danger"> 3 </div> </div> </div> </div> <p>2 is pushed below 1 and 3 on small screens</p> <div class="row"> <div class="well well-lg clearfix"> <div class="col-xs-6 col-md-4"> <div class="alert alert-info"> 1 </div> </div> <div class="col-xs-6 col-md-4 col-md-push-4"> <div class="alert alert-danger"> 3 </div> </div> <div class="col-xs-12 col-md-4 col-md-pull-4"> <div class="alert alert-warning"> 2 </div> </div> </div> </div> <p>1 moves to the right as a sidebar on large screens</p> <div class="row"> <div class="well well-lg clearfix"> <div class="col-sm-4 col-md-3 col-md-push-9"> <div class="alert alert-danger"> 1 </div> </div> <div class="col-sm-8 col-md-9 col-md-pull-3"> <div class="alert alert-info"> 2 </div> </div> </div> </div> </div>
Make columns reorder depending on screen size. === Demo: https://goo.gl/YT80J4

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.