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

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.