Bootstrap Grid System

Bootstrap 3's grid system introduced the concept of having a different grid layout dependent on the browser's size.

Adjusting the browsers size will alter the grid layout and will highlight the current CSS being applied.
This will provide a visual representation of the link between the browser size and the bootstrap grid css class being applied.

.col-xs-12 .col-sm-6 .col-md-12 .col-lg-8
.col-xs-6 .col-sm-6 .col-md-4 .col-lg-4

Bootstrap 3's grid system also allows us to hide and show columns depending on the width of a page. This can be achieved using the visible-xx or hidden-xx CSS classes.

Displayed always
Only displayed when width > 768px
Only displayed when width > 992px
Only displayed when width > 1200px