Is it necessary to add col-md selector in Bootstrap 3?

Question

I tried searching for an answer to this to no avail. Basically what I'm wondering is if it is necessary to specify a col-md-* value in Bootstrap 3, or if you can just use, say, col-xs-12 and col-sm-* and have the col-sm-* value dictate the col size all the way to some massive display.

This seems like a no-brainer (that having col-sm would be fine) but the documentation includes seemingly redundant col-md-* values as well, such as here (taken from "Example: Mobile, Tablet, and Desktop" under "Grid System" in CSS section:

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

Any clarification here would be greatly appreciated. Thanks!

Answer 1

Your intuition is correct, the lowest value you set (xs, sm or md) will dictate for the larger screen sizes; that means if you want your div to span 4 columns starting at small devices and all the way up, you just have to set .col-sm-4.

It works this way because of how the media queries are set up:

/* Extra small devices (phones, up to 480px) */ 
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-tablet) { ... }

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-desktop) { ... }

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-large-desktop) { ... }

If not overridden, classes for small devices will apply to larger screens as well