push 12 column div down to new row on small devices

Question

I was wondering if it's possible to push down a 12 columns div, down to the new row on small devices and pull the 12 columns div up in previous div's place with Bootstrap 3.
I know it can be done if both div sum up to 12 column on large devices, but I can't get push and pull to work on 12 columns div.

Below is the code snippet that works fine in col-md-8 and col-md-4 situation, but not in col-md-12 and col-md-12, which is the required case in my scenario.

<div class="container">
<h1>#14</h1>
<div class="row">  
    <div class="col-md-4 col-md-push-8 col-xs-12">
      <div class="row">
        <div class="col-xs-12 col-md-12"><div class="well">3 (pull to top)</div></div>
      </div>
    </div>
    <div class="col-md-8 col-md-pull-4 col-xs-12">
       <div class="row">
        <div class="col-xs-12"><div class="well">1 (push down)</div></div> 
       </div>
    </div>  
    <div class="col-xs-12">
       <div class="well">2</div>
    </div>  
</div>

Here's a codepen for this:

See the Pen Bootstrap Columns Pull/Push by Muhammad Arslan Aslam (@arximughal) on CodePen.

Please correct me where I'm getting this wrong?

Here's a rough mock of what I need:

i dint get u, can u draw a image how u required on small screens — Ganesh Putta, Dec 15 '17 at 07:58
Possible duplicate of https://stackoverflow.com/questions/25714852/change-the-order-of-col-12-columns-in-bootstrap-3-by-using-push-pull — Suresh Ponnukalai, Dec 15 '17 at 10:38

score 1 · Accepted Answer · answered Dec 15 '17 at 08:06

You may use flexbox together with order for situation like this.

https://codepen.io/jacobgoh101/pen/wpaRmr

HTML

<div class="row">
  <div class="col-xs-12 col-sm-4 div-1">1</div>
  <div class="col-xs-12 col-sm-4 div-2">2</div>
  <div class="col-xs-12 col-sm-4 div-3">3</div>
</div>

CSS

.row > div {
  border: 1px solid #000;
}

@media (max-width: 767px) {
  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .row .div-1 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .row .div-2 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .row .div-3 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

btw, this would be even easier if you use bootstrap 4. bootstrap 4 heavily relies on `flexbox`. i think it's awesome. — Jacob Goh, Dec 15 '17 at 08:13
Yes. I proposed this. But Application is in a state that we can't afford to redo all of the components. That would take a whole lot of time. — Muhammad Arslan Aslam, Dec 15 '17 at 09:31

push 12 column div down to new row on small devices

1 Answers1