. col-xs-Ultra Small Screen Phone (<768px),. col-sm-Small screen tablet (≥768px),. col-md-Medium-screen desktop display (≥992px) (raster parameter). The grid system automatically points to 12 columns regardless of the screen col-xs-* The parameters followed by col-sm-* and col-md-* represent the width of the div in the current screen. For example <div class= "Col-xs-6 col-md-3" > This div occupies in the screen position is: 1 in the ultra-small screen occupies 6 columns that is half of the screen (6/12) 2. In the single screen, the 3 column is 1/4 (3/12). If we're going to show 3 div (12/3=4) side on the small screen, 6 on the big screen col-xs-4 col-md-2 so we can control what layout we want. Another case is <div class= "col-sm-10 col-md-8" > followed by the div in COL-SM parameters if 3 is <div class= "col-sm-10 col-md-8" ></ div> <div class= "col-sm-3 col-md-4" ></div> If so, the two div will row 2 rows in the small screen because 10+3>12, in the medium screen can row the same row 8+4=12
The significance of COL-XS,COL-SM,COL-MD in CSS of bootstrap fence system