In bootstrap 3, there are some types of columns col-md-xx, col-sm-xx, col-lg-xx
My question is, is there any standard to be easy to develop with all these columns?
For example
"Whenever I use col-md-4 it is good practice to use col-sm-6 and col-lg-10"
Any rule of the type?
I usually think more about my content than about the visual.
This means that responsiveness is driven by the need for each content block.
But looking at some of my pages, the following pattern is pretty common:
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4"></div>
<div class="col-sm-12 col-md-6 col-lg-4"></div>
<div class="col-sm-12 col-md-6 col-lg-4"></div>
</div>
This ratio (1, 1: 2, 1: 3) seems pretty harmonic but that does not mean that you should use this as a rule.
I suggest taking your HTML code to organize your grid.
All this can be done via LESS . That is ... download the project in Github and create an environment to work with the Bootstrap LESS files.
From this, just add the grids and rows, in the classes that should have this behavior.
Example:
.thumbnails {
.make-row();
.thumbnails-item {
.make-xs-column(12);
.make-sm-column(4);
.make-md-column(3);
}
}
This will make code maintenance and scalability increase a lot.
It's a good practice to analyze your page in at least 4 sizes, Extra small (xs), Small (sm), Medium (md), and Wide (lg), so if you want to use only one class, md-4 means that your element (div) will have a width of 4 columns from (mobile first) of average size.
This means that in all other smaller sizes, the width of 12 columns will be defined because there is a default size that is 12.
If you do not want the size of 12 columns to be applied to a particular screen size, it is recommended that you include the convenient size.
Current browsers have tools to help you analyze your page in various sizes. In Chrome and Firefox just press F12 to open a series of useful tools for this process.