CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Christian Szanwald
Christian Szanwald

Reputation: 81

Bootstrap 3: Push/pull columns over rows

i have the layout on mobiles like that:

 --------- 
|    1    |  
 --------- 
|    2    |  
 --------- 
|    3    |  
 ---------

for larger screens, i want to have it like that:

 -----------------------------------
|        1               |     3    |
 -----------------------------------
|                 2                 |
 -----------------------------------

Code, which does not work, because pull/push over one row :-(

<div class="row clearfix">
    <div class="col-sm-9 alert alert-info">
        1
    </div>
    <div class="col-sm-3  col-sm-push-3 alert alert-warning">
         2
    </div>
    <div class="col-sm-3 col-sm-pull-3 alert alert-debug">
         3
    </div>
</div>

http://jsfiddle.net/QtPd2/27/

Upvotes: 8

Views: 5908

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362430

Update 2017

This may be another option for some. This layout is now natively possible in Bootstrap 4 using flexbox ordering. No duplicate code is required. 1-3-2 on large, 1-2-3 on mobile.

<div class="row">
    <div class="col-md-9">1</div>
    <div class="col-md-12 flex-md-last flex-unordered">2</div>
    <div class="col-md-3">3</div>
</div>

Demo: http://codeply.com/go/Tg7XcOOz6N

Upvotes: 0

Dyrandz Famador
Dyrandz Famador

Reputation: 4525

Try this one..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="row clearfix">
    	<div class="col-sm-9 col-md-3 alert alert-info">
    		1
    	</div>
    	<div class="col-sm-3  col-md-3 col-md-push-3 alert alert-warning">
    		 2
    	</div>
    	<div class="col-sm-3  col-md-3 col-md-pull-3 alert alert-debug">
    		 3
    	</div>
    </div>

Upvotes: 1

ckuijjer
ckuijjer

Reputation: 13814

As pushing and pulling works by setting a left or right property it will never wrap to another row as you noted.

A solution is to duplicate the contents of either column 2 or 3 (take the one with the least amount of content or interactivity). Hide one one xs and the other on sm, md and lg.

In the example below I've duplicated column 2.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-9 alert alert-info">
      1
    </div>
    <div class="col-xs-12 alert alert-warning hidden-sm hidden-md hidden-lg">
      2
    </div>
    <div class="col-xs-12 col-sm-3 alert alert-danger">
      3
    </div>
    <div class="col-sm-3 alert alert-warning hidden-xs">
      2
    </div>
  </div>
</div>

P.S. There is no need to add a .clearfix on a .row as it already contains that. Even if you want a column to be 12 wide on the smallest layout, always add a .col-xs-12 class as it adds padding used to negate the negative margin on the .row.

Upvotes: 5

Related Questions