What is the difference among
The Bootstrap 3 grid comes in 4 sizes (or "breakpoints").
Extra small (for smartphones
.col-xs-*), small (for tablets
.col-sm-*), medium (for laptops
.col-md-*) and large (for laptops/desktops
.col-lg-*). These grid sizes enable you to control grid behavior on different devices, i.e. desktop, laptops, tablet, smartphone, etc.
col-sm-3 is 3 grid columns wide (25%) on a typical small device width (more than 768 pixels)
col-md-3 is 3 grid columns wide (25%) on a typical medium device width (more than 992 pixels)
Combine the classes to use change column widths on different grid sizes..
<div class="col-md-3 col-sm-6">..</div>
lg grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the
xs grid fits in. Columns that use the
col-xs-* classes will not stack vertically and continue to scale down on the smallest screens.
Resize your browser using this demo and you'll see the grid scaling effects.
Update for Bootstrap 4 there is a new XL size, see this demo
Also, read this article that explains more about the Bootstrap grid