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.

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

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>

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.