Example: from the stack to the horizontal arrangement
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Examples: Mobile devices and desktop screen
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Example: mobile phone, tablet, desktop
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Example: the extra column (column) will start a new line arrangement
.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
Subsequent columns continue along the new line.
Responsive column resets
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Column offset
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Nesting column
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
Column sorting
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Responsive Tools
Ultra-small mobile phone screen (<768px) visible
Ultra-small mobile phone screen (<768px) visible
Small screen phone tablet (≧ 768px) visible
Small screen phone tablet (≧ 768px) visible
Medium Screen Desktop (≧ 992px) visible
Medium Screen Desktop (≧ 992px) visible
Big Screen Desktop Desktop (≧ 1200px) visible
Big Screen Desktop Desktop (≧ 1200px) visible