0

All divs are in one row. Any suggestions on how to move the middle div to the left when the column size at col-md or larger?

On mobile the stacking order. 

------------------
|      A         |
------------------
------------------
|      B         |
------------------
------------------
|      C         |
------------------

To on col-md.

------------------ ------------------
|      A         | |        B        |
------------------ ------------------
------------------
|      C         |
------------------
Xm7X
  • 861
  • 1
  • 11
  • 23
meta
  • 173
  • 3
  • 10

1 Answers1

1

I'm not sure if you're trying to move the 2nd column to the left, or achieve what is shown in your pictures. Here's an example using the push/pull classes..

<div class="container-fluid">
    <div class="col-sm-6 col-sm-push-6">
      a
    </div>
  <div class="col-sm-6 col-sm-pull-6">
      b
    </div>
  <div class="col-sm-6">
      c
    </div>
</div>

http://www.bootply.com/pUyLDG9HJb

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Perfect Thank you, I also found [this solution](http://stackoverflow.com/questions/18542303/possible-to-achieve-this-mobile-desktop-layout-using-bootstrap-or-other-grid/18547041) – meta Oct 28 '14 at 19:47
  • Strange! As soon as I add more than one html element to well A, the well C well moves to the right. Instead of staying in place and getting pushed downward. – meta Oct 28 '14 at 21:00
  • AFIK you would a clearfix (using responsive utility classes hidden-xs) between the last two columns as this is 18 columns to clear it – Christina Oct 29 '14 at 14:41