Geek Answers Handbook

Clicking a column on the next line using col-md-push- *

I have the following 6 building blocks:

[1][2] [3][4] [5][6]

All blocks have class col-sm-6 on one line. But since block 3 is superior to bootstraps, 12 columns are structured, it will go to the next row. Great what I want.

The only thing I want to swap 2 and 3. But it only works for blocks on the same line. So 1 and 2 can change, but 2 and 3 are not (in SM mode)

  <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="well"> 1 </div> </div> <div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0"> <div class="well"> 2 </div> </div> <div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0"> <div class="well"> 3 </div> </div> <div class="clearfix hidden-sm"></div> <div class="col-sm-6 col-md-4"> <div class="well"> 4 </div> </div> <div class="col-sm-6 col-md-4"> <div class="well"> 5 </div> </div> <div class="col-sm-6 col-md-4"> <div class="well"> 6 </div> </div> </div> </div>

He will create:

  [1] [2] [3] [4] [5][6]

See http://www.bootply.com/127062

+6
source share
1 answer

You are right, there is no way to go to the next line in Bootstrap 3.x.

But, if you consider it “mobile first,” first create a sm layout, and then click / drag it accordingly for larger screens.

 <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="well"> 1 </div> </div> <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4"> <div class="well"> 3 </div> </div> <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4"> <div class="well"> 2 </div> </div> <div class="clearfix hidden-sm"></div> <div class="col-sm-6 col-md-4"> <div class="well"> 4 </div> </div> <div class="col-sm-6 col-md-4"> <div class="well"> 5 </div> </div> <div class="col-sm-6 col-md-4"> <div class="well"> 6 </div> </div> </div> </div>

http://www.bootply.com/127076


Update Bootstrap 4.x

Now in Bootstrap 4 Beta, you can “click” or “pull” the columns to the next “row” using the flexbox ordering classes:

https://www.codeply.com/go/MELnKiqofA

+10
source

More articles:


All Articles