[k]Difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3
Difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3[转]
1：
The Bootstrap 3 grid comes in 4 sizes (or "breakpoints").
Tiny (for smartphones .col-xs-*), small (for tablets .col-sm-*), medium (for laptops .col-md-*) and large (for laptops/desktops .col-lg-*).
2：
Small grid (≥768px) = .col-sm-*
Medium grid (≥992px) = .col-md-*
Large grid (≥1200px) = .col-lg-*
3：
The sm, md and 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.
If you think of the columns starting out horizontally, then you can choose when you want them to stack.
For example, if you start with columns: A B C
You decide when should they stack to be like this:
A
B
C
If you choose col-lg, then the columns will stack when the width is < 1200px.
If you choose col-md, then the columns will stack when the width is < 992px.
If you choose col-sm, then the columns will stack when the width is < 768px.
If you choose col-xs, then the columns will never stack.
On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:
If you choose col-sm, then the columns will become horizontal when the width is >= 768px.
If you choose col-md, then the columns will become horizontal when the width is >= 992px.
If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.