CSCI 4140: Responsive Web Design
Grid System Example: Mobile and desktop
It is possible to mix .col-xs-* and .col-md-* such that the columns can be arranged differently in different devices...
As a "ruler":
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
Let's mix things together!
.col-xs-8 .col-md-5
.col-xs-4 .col-md-7
.col-xs-6 . col-md-4
.col-xs-6 . col-md-4
.col-xs-6 . col-md-4
col-xs-11 col-sm-7 col-md-4 col-lg-1
Column wrapping happens when there are more than 12 columns within a single row...
.col-xs-9
.col-xs-3 (No problem!)
.col-xs-5 (New line!)
.col-xs-6
.col-xs-4 (New line!)
.col-xs-3
.col-xs-5 (Still same line!)
.col-xs-1 (New line again!)
Sometimes we need .clearfix to ensure that multiple lines do not mix together.
.col-xs-3
Line 1
Line 2
Line 3
.col-xs-9
.col-xs-2
.col-xs-2
.col-xs-8 (This goes to the right of the largest column...)
.col-xs-3
Line 1
Line 2
Line 3
.col-xs-9
.col-xs-2 (Add a .clearfix div after the end of a line)
.col-xs-2
.col-xs-8
Offsetting columns
.col-xs-offset-2
.col-sm-offset-4
.col-md-offset-6
.col-lg-offset-8
.col-xs-4
Nesting columns
.col-sm-2
.col-sm-8
.col-sm-4
.col-sm-5
.col-sm-2
.col-sm-2
Column ordering
I don't know why Bootstrap defines .col-md-push-* and .col-md-pull-* modifier classes before I made the tutorial resource page...
.col-md-9 .col-md-push-3 See? The order of these columns are reversed!
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>