Bootstrap 3: Push/Pull Columns Only on Smaller Screen Sizes

How to set Push/pull columns for Only smaller screen sizes in Bootstrap

You need to use *-push-0 and *-pull-0 to tell Bootstrap not to use push/pull on md and lg. Also I removed the lg since md alone will work in your case.
1-2-3 on large, 1-3-2 on mobile.

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

Demo: http://www.bootply.com/PPTzE3ONur

Bootstrap 3: Push/pull columns only on smaller screen sizes

Answered it myself, simply by thinking: mobile first!

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

Get them in the order I want on the tablet first, then push/pull them in to position on the desktop.

How to change the order of 3 bootstrap columns at small screen size using push and pull?

In this case start from mobile

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="row">  <div class="col-sm-12 col-md-4" style="border:solid 1 px black;">1</div>  <div class="col-sm-12 col-md-4 col-md-push-4" style="border:solid 1 px black;">3</div>  <div class="col-sm-12 col-md-4 col-md-pull-4" style="border:solid 1 px black;">2</div> </div>

Bootstrap: reorder 3 columns on small screens

Assuming "A" is taller as in your picture, just use pull-right on the other columns, and col-xs-12 to ensure full width on mobile...

Demo

<div class="row">
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                B
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <div>
                A
            </div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                C
            </div>
        </div>
    </div>

Demo

Twitter Bootstrap 3 - Swap columns on extra-small devices

You need to use pull and push on the right way .... That is for the larger devices:

Change the order of your markup exact the same you want on Mobile -- Mobile First

Add push and pull to change the order on larger devices

<div class="col-md-8 col-md-push-4 col-sm-6 col-sm-push-6 col-xs-12">
   <div class="post">
      Something here Now
   </div>
</div>
<div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6 col-xs-12">
   <div class="post">
      Something here 
   </div>
</div>

Check this BottplyDemo

Rearranging bootstrap columns on smaller screens

This is only possible by repeating the first div 'A' and toggling the visibility on the small size col-sm;

Working snippet below:

.classA {  background: red}
.classB {  background: yellow}
.classC {  background: green}
.classD {  background: blue}
div{ text-align:center; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row">  <div class="col-12 col-sm-3  d-none d-sm-block classA">    A (original)  </div>  <div class="col-12 col-sm-6">    <div class="row">      <div class="col-12 h-50 classB">        B      </div>      <div class="col-12 d-block d-sm-none classA">        A      </div>      <div class="col-12 h-50 classC">        C      </div>    </div>  </div>  <div class="col-12 col-sm-3  classD">    D  </div></div>

Bootstrap - Using Push/Pull with col-12?

You reverse things! You write your base code to be 2,1,3 then you push pull it until it looks the way you want it on a bigger screen.

That's the whole mobile first thing.

<div class="row">
  <div class="col-md-4 col-sm-4 col-md-push-4">2</div> <!-- Push Column -->
  <div class="col-md-4 col-sm-4 col-md-pull-4">1</div> <!-- Pull Column -->
  <div class="col-md-4 col-sm-4">3</div>
</div>

Fiddle

This breaks above md but you get the idea