Customizing page grid with push and pull
I am using Bootstrap and I am having trouble setting up my grid. How do I use push-pull to load columns like below?
This is what I still have,
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">A</div>
<div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div>
</div>
+3
source to share
1 answer
-
Make sure you don't add period (
.
) inside the class attribute. -
When using push / pull, you need to offset the columns they will usually come from. Moving them left or right will not change their base order in the document flow.
So, you can do it like this:
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" >A</div>
<div class="col-xs-7 col-sm-9 col-md-2 col-md-push-7">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2">C</div>
</div>
Demo in stack fragments:
.green { background: #A3D7C3; }
.red { background: #EF453A; }
.yellow { background: #FDBE2D; }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<h2> Normal </h2>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3 green">A</div>
<div class="col-xs-7 col-sm-9 col-md-2 red">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 yellow">C</div>
</div>
<h2> Push / Pull </h2>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3 green">A</div>
<div class="col-xs-7 col-sm-9 col-md-2 col-md-push-7 red">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2 yellow">C</div>
</div>
</div>
+2
source to share