Change the order of col-*-12 columns in Bootstrap using push/pull

Question

I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.

I have read that push and pull bootstrap directives help to accomplish that, but is it possible to change the place of two columns of the same size with the following classes?

div.col-xs-12.col-xs-push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2

Solution 1

Actually you can not reorder the columns having .col-*-12 by push/pull helper classes. The sum of columns exceeds the default 12 columns which is defined by @grid-columns.

You could either change the order of columns in HTML and then use the ordering classes on larger screens as follows:

EXAMPLE HERE

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

Or use this fancy approach to reverse the ordering of the columns that are placed vertically under each other:

EXAMPLE HERE

@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  }
}

It's worth noting that CSS transforms are supported in IE9 as well; Just don't forget to add vendor prefixes.

Solution 2

In Bootstrap 4, you can change the order of full-width (12 unit) columns using the flexbox ordering classes.

Update 2017 - Bootstrap 4 alpha 6

In 3.x you could only push/pull columns left or right (horizontally). With the new flexbox ordering utils in 4.x, it's now possible to change the order of columns vertically...

<div class="container">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
  </div>  
</div>

http://www.codeply.com/go/7RUJORgxBK

---

Update Bootstrap 4 Beta

The alpha flex- ordering classed have changed to order- classes.

<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>

https://www.codeply.com/go/VUjKsM3cUD

Solution 3

You can totally do it, see Bootstrap's Grid Column Ordering

But of course your example will have no effect since xs-12 is a full width column, so this will apply only to models where the sum of the columns is 12 (or if 16 or whatever if you customize your Bootstrap grid). See the Bootstrap example on that same page for illustrative purposes:

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

Solution 4

If you need to reorder cols for a responsive case like

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
  p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
  p test2

you could use a .pull-right class and reverse the column order.

div.col-xs-12.col-sm-3.pull-right
  p test2
div.col-xs-12.col-sm-9
  p test1

then they are in order for col-xs-12 and appear correctly for the other breakpoints.

Solution 5

In case anyone comes here with a similar issue like me, only finding push/pull doesn't fit your needs, because either col-xs-12 wont pull/push or using more than 2 columns makes it tougher to figure out the push/pull values here is my solution.

Below is the fancy solution by @hashemquolami

@media (max-width: 767px) {
 .row.reorder-xs {
   transform: rotate(180deg);
   direction: rtl; /* Fix the horizontal alignment */
 }

 .row.reorder-xs > [class*="col-"] {
   transform: rotate(-180deg);
   direction: ltr; /* Fix the horizontal alignment */
 }
}

Although this approach works fine, I have a different solution:

The bootstrap grid works by floating the columns left, this can easily be altered with css. Look at the markup below, as bonus col-md-offset-1 reversed to emulate 5 centered columns.

HTML

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

CSS

@media screen and ( min-width: 992px) {
  .reverseOrder [class^="col-"] {
      float: right;
  }
  .reverseOrder .col-md-offset-1 {
     margin-right: 8.333333333333332%;
     margin-left: 0px;
  }
}

JSFIDDLE

View more solutions

Comments

[Umanda]

This is the perfect solution I can suggest, I had a same situation and I have used this trick and it is working perfectly

[Mehul Tandale]

I used the first option, Mobile first approach is always a nicer choice!

[Kaka Ruto]

The second one's a real hack.

[Óscar Aguayo]

Nice CSS trick! It was really useful for me since my right column is position: fixed in lg and md but position: static in sm and xs. So the mobile first Bootstrap approach doesn't work in this case.

[SandroMarques]

UPDATE: However some classes was renamed. In this case flex-first should be changed to order-first and flex-sm-unordered to order-0 github.com/twbs/bootstrap/pull/21739

[Zim]

If you read the full thread on github you'll see they haven't been renamed yet as of alpha 6.

[Redplane]

But the text is reversed

[carrabino]

thank you ... as per your advice, the correct technique is to "change the order of columns in HTML and use ordering classes for larger screens" ... i was trying to force the re-ordering for smaller screens.