Bootstrap 3 Grid System
This page helps visualize the fluid/responsive capabilities that are baked in to the Bootstrap 3 Grid system. The HTML snippets are borrowed from the Bootstrap documentation and a little CSS was added to help flag layout changes. Toggle the viewport monitor to track how changes in viewport width affect layout.
One thing to keep in mind is that Bootstrap 3 bills itself as "Mobile First". So in the Bootstrap documentation when you see something that reads "stacked-to-horizontal", it means stacked vertically on a small screen and then spreads out horizontally as the screen width gets wider.
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
Offset, push, and pull resets
Reset offsets, pushes, and pulls at specific breakpoints.
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
Responsive column resets (without clearfix)
Responsive column resets (with clearfix)
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
Example: Mobile, tablet, desktops
Example: Mobile and desktop'
Dual 300x300 gif's