<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.