Changing column order in using bootstrap

Question

how to achieve the following using bootstrap:

Desktop View

[col-md-9(number 1)][col-md-3(number 3)]  
[col-md-12(number 2)]

Mobile view

[col-xs-12(number 1)]  
[col-xs-12(number 2)]  
[col-xs-12(number 3)] 

thanks in advance

Answer 1

in this case you not use the col pull and col push . You use visible and hidden class.

<div class="row visible-xs visible-sm">
                <div class="col-xs-12" style="background-color:red">1</div>
                <div class="col-xs-12" style="background-color:blue">2</div>
                <div class="col-xs-12" style="background-color:green">3</div>
            </div>
            <div class="row visible-md visible-lg">
                <div class="col-xs-9" style="background-color:red">1</div>
                <div class="col-xs-3" style="background-color:green">3</div>
                <div class="col-xs-12" style="background-color:blue">2</div>   
            </div>

Answer 2

div {
  color: #fff;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-md-6" style="background-color:red">1</div>
  <div class="col-xs-12 col-md-6 hidden-xs hiddem-sm" style="background-color:green">3 (visible in desktop and above)</div>
  <div class="col-xs-12 col-md-12" style="background-color:blue">2</div>
  <div class="col-xs-12 col-md-6 visible-xs visible-sm" style="background-color:green">3 (visible in tabs and mobile)</div>
</div>

You can't directly achieve that order, for atleast one case, you'll need to replicate your content and toggle its visible in Desktop or mobile view.