How to change the ordering of the columns in the row in the bootstrap?
OR
How the push and pull column classes used?
There are inbuilt classes for ordering the columns of the grid in the row div. There some classes .col-md-push-* and .col-md-pull-* we can use the number 0-11 to pull and with the push classes. To more understand. we use an example of 12 rows columns. Now to inverse the order of columns we will use the standards bootstrap push pull classes. To understand clearly we use the some colors and text numbers for this columns. First we created 12 columns and place numbers from one to twelve in the ascending order. Now we change the order and the column will display the inverse order twelve to one.
For Example we have requirements:-
1. We have twelve columns in a row with the different colors. Each have number in the ascending order 1-12.
2. Change the order in the inverse. using the order classes push and pull show the div in the descending ordering text. it means placed 1 text div will show in the 12th position column in the row grid.
3. Similar all the other div change the order in the descending order but the html code should be in the ascending order.
For Example we have requirements:-
1. We have twelve columns in a row with the different colors. Each have number in the ascending order 1-12.
2. Change the order in the inverse. using the order classes push and pull show the div in the descending ordering text. it means placed 1 text div will show in the 12th position column in the row grid.
3. Similar all the other div change the order in the descending order but the html code should be in the ascending order.
 |
| Before ordering |
 |
| After ordering classes |
<!-- BEFORE ORDERING -->
<div class="row">
<div class="col-md-1 red">1</div>
<div class="col-md-1 green">2</div>
<div class="col-md-1 blue">3</div>
<div class="col-md-1 orange">4</div>
<div class="col-md-1 gray">5</div>
<div class="col-md-1 magenta">6</div>
<div class="col-md-1 red">7</div>
<div class="col-md-1 green">8</div>
<div class="col-md-1 blue">9</div>
<div class="col-md-1 orange">10</div>
<div class="col-md-1 gray">11</div>
<div class="col-md-1 magenta">12</div>
</div>
<!-- AFTER ORDERING -->
<div class="row">
<div class="col-md-1 col-md-push-11 red">1</div>
<div class="col-md-1 col-md-push-9 green">2</div>
<div class="col-md-1 col-md-push-7 blue">3</div>
<div class="col-md-1 col-md-push-5 orange">4</div>
<div class="col-md-1 col-md-push-2 gray">5</div>
<div class="col-md-1 col-md-push-2 magenta">6</div>
<div class="col-md-1 col-md-pull-1 red">7</div>
<div class="col-md-1 col-md-pull-3 green">8</div>
<div class="col-md-1 col-md-pull-5 blue">9</div>
<div class="col-md-1 col-md-pull-7 orange">10</div>
<div class="col-md-1 col-md-pull-9 gray">11</div>
<div class="col-md-1 col-md-pull-11 magenta">12</div>
</div>
</div>