how to wrap column under shorter column in bootstrap

Question

Hi I am trying to wrap a shorter column (blue) underneath the first column (red) for large devices, but to stay at the end on mobile devices. Bootstrap push and pull doesn't seem to work (probably because of it wrapping on two rows). I also thought of float but that already comes on the column div as part of Bootstrap and it didn't help.

Here is a bootply with my div layout, works fine for mobile but not large screens: https://www.bootply.com/3WKeAukbz0

Answer 1

Just use Bootstrap's pull-right class..

https://www.bootply.com/WARW7AOdQz

  <div class="row">
    <div class="col-sm-5 col-xs-12" style="height:200px; background-color:red;">text</div>
    <div class="col-sm-7 pull-right" style="height:500px; background-color:green;">text</div>
    <div class="col-sm-5 col-xs-12" style="height:100px; background-color:blue;">text</div>
  </div>