So basically, col-md-3, col-sm-6, etc. refer to how much space on the grid that the div takes up with certain window sizes. You have 12 columns to work with on any given page, and what you're telling your divs is how much of the grid they are allowed to take up given a certain page size. For instance, if you want your columns to be spread out and fill the whole page when it's full screened, but are tightly packed in the middle if the page is windowed, you would use something like
<div class=" col-md-2 col-lg-6">
</div>
<div class=" col-md-2 col-lg-6">
</div>
This would make it so that when the page is "large", the divs will each use 6 spaces on the grid respectively (for a total of 12, which is the full width of the page), and when the page is resized to meet the threshold for "medium", the space the columns use will shrink down to 2 spaces on the grid respectively (for a total of 4, which is 1/3rd the full width of the page).
Read this for more info on how the Bootstrap grid works:
http://getbootstrap.com/css/
