bootstrap col-sm col-md difference

The meaning of col-xs-*, col-sm-*, col-md-* in the bootstrap fence system CSS is to automatically select the corresponding class style according to the width of the display screen:

.col-xs- Ultra-small screen mobile phone (<768px) (recommended learning: Bootstrap video tutorial)

.col-sm- Small screen tablet (≥768px)

.col-md- Medium screen desktop monitor (≥992px)

.col-lg- Large screen large desktop monitor (≥1200px)

First of all, explain:

1, col-column;

2. xs-maxsmall, extra small; sm-small, small; md-medium, medium; lg-large, large;

3. -* means occupying columns, that is, automatically occupying each row 12-column grid system ratio;

4, col-xs-*ultra small screen mobile phone (<768px),

.col-sm-*small screen tablet ( ≥768px),

.col-md-*Medium screen desktop monitor (≥992px) (grid parameter).

5. No matter where On this screen, the grid system will automatically divide each row into 12 columns. The parameters followed by col-xs-* and col-sm-* and col-md-* represent the number of columns occupied by each div in the current screen. .

For example