Push/pull columns for Only smaller screen sizes in Bootstrap 3

[harnishdesign]

I have the following layout on a page(with Bootstrap 3.2.0):

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

SO, it is working perfect in small screen(according to below).

 -----------------------
|           1           |
 ------------------------
|     3     |     2     |
 ------- ------- -------

But, Here, I have use col-sm-pull-* and col-sm-push-* for only small screen. though, Push/pull columns is call in Medium screen and Large screen.

if, I will use col-sm-push/pull-* & col-xs-push/pull-* So, why it is call(run) in large & medium screen?

Medium screen and Large screen:

I want to this                 I get this
 -------- ---------- ------        -------- ------ ---------
|   1   |    2    |  3  |         |   1   |  3  |    2    |
 -------- ---------- ------        -------- ------ ---------

So, How to set Push/pull columns only smaller screen?

What is wrong Here?
How can i fix it?

Would appreciate the help.

[tesseractdigital]

I think this is what you’re looking for:

<div class="col-md-4">1</div>
<div class="col-sm-6 col-sm-push-6 col-md-5 col-md-push-0 ">2</div>
 <div class="col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-0">3</div>

Using push-0 and pull-0 resets your ordering.

[Author]

Posts