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

demo.html

<div class="row reorder-xs">
      <div class="col-xs-12">
        <p>test1</p>
      </div>

      <div class="col-xs-12">
        <p>test2</p>
      </div>
</div>

fix.css

@media (max-width: 767px) {
  .row.reorder-xs {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

    direction: rtl;
  }

  .row.reorder-xs > [class*="col-"] {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);

    direction: ltr;
  }
}

new_gist_file.md

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.

http://stackoverflow.com/questions/25714852/change-the-order-of-col-12-columns-in-bootstrap-3-by-using-push-pull

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