https://screenshots.firefox.com/eFOZJy95XtDAlkrh/codepen.io
It works for me.
Note that col-lg-2 will create a div which spans 2 columns on a large screen and span 12 columns on any smaller size.
I just tried changing the window size and the div elements seem to fall into their places(partially). Could you please elaborate how the 4 classes work on different screens and the spaces they occupy.
it works perfectly, remember:
-every div rules automatically assigned for bigger screen, (ex : col-sm-2 will will automatically assigned to col-md-2 at medium screen, and become col-lg-2 at large screen
-if you only assign grid value for big screen,it will take entire row for small screen
let’s check for each screen size
-Large screen >= 1200px
1 = col-lg-2
2 = col-md-2 -> automatically assigned to col-lg-2
3 = col-sm-2 -> automatically assigned to col-lg-2
4 = col-xs-2 -> automatically assigned to col-lg-2
5 = col-xs-2 -> automatically assigned to col-lg-2
it will consist of one row and fill 10 column, leave 2 empty column
-Medium screen >= 992px
1 = undeclared, you didn’t assign any grid value for this div in medium screen so it will take entire row
2 = col-md-2
3 = col-sm-2 -> automatically assigned to col-md-2
4 = col-xs-2 -> automatically assigned to col-md-2
5 = col-xs-2 -> automatically assigned to col-md-2
it will consist of 2 row, 1 row for div 1 and row 2 occupied by 8 column
-smallscreen >= 768px
1 = undeclared, you didn’t assign any grid value for this div in small screen so it will take entire row
2 = undeclared, you didn’t assign any grid value for this div in small screen so it will take entire row
3 = col-sm-2
4 = col-xs-2-> automatically assigned to col-sm-2
5 = col-xs-2 -> automatically assigned to col-sm-2
it will consist of 3 row, 1 row for div 1, 1 row for div 2 and row 3 occupied by 6 column
-extra smallscreen < 768px
1 = undeclared, you didn’t assign any grid value for this div in small screen so it will take entire row
2 = undeclared, you didn’t assign any grid value for this div in small screen so it will take entire row
3 = undeclared, you didn’t assign any grid value for this div in small screen so it will take entire row
4 = col-xs-2
5 = col-xs-2
it will consist of 3 row, 1 row for div 1, 1 row for div 2, 1 row for div 3 and row 4 occupied by 4 column
Thanks. I appreciate the time you took for such a detailed explanation. One more thing though- if col-xs can adjust to all screen sizes then why not use it for all the cases and just be done away with -sm, -md and -lg?
Because you might want different values for each screen size. You could for example have a div that spans 10 columns on a small screen, 8 columns on medium screen and 6 columns on a large screen:
<div class="col-sm-10 col-md-8 col-lg-6"></div>
That clears it…Once again, loads of gratitude from this side.