This is a very basic form of bootstrap, but is it so easy to master and understand?
(1). For COL-MD Div, the default is vertical arrangement, when the viewport (screen or browser width) >992px,col-md-1 div blocks are arranged horizontally
(2). Container The maximum width of the div is adaptive, according to the screen or browser "viewport" width automatically adjusted, for example, when the "viewport" width >=1200px, container div maximum width is 1170px; When the viewport >=768px,<=970px container the maximum width of the div is 750px
(3). When the col block is arranged horizontally, each Col block is the concept of the widest width, and for col-md Div, the maximum column width is probably 81px ( I practice measuring not 81px, for explanation )
(4). Grid class Nesting
The display effect is as follows: here Col-xs and COL-MD nested use, when the viewport >=992px, col-md block layer horizontal arrangement, COL-XS does not work, and when Col-xs alone, is in line with the basic requirements of the grid system, that a row can only have 12 col, so, The COL-XS block on line 2nd will be changed.
Bootstrap 3 Learning Notes-grid