title: Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3
body: <p>I'm getting started on Bootstrap 3 and I'm having some trouble understanding how the grid classes are meant to be used.</p>
  
  <p>Here's what I've figured out so far: </p>
  
  <p>It appears that the classes <code>col-sm-#</code> and <code>col-lg-#</code> differ from plain old <code>col-#</code> in that they will only apply when screens are above a certain size (768px and 992px respectively). If you omit the -sm- or -lg- the divs will never collapse into one column.</p>
  
  <p>However, when I create two divs inside a row that are both <code>col-sm-6</code> it seems they are <em>only</em> side by side when the window is between 768px and 992px wide. In other words, if I shrink the window all the way down and then slowly widen it, the layout is single column, then two columns, then back to single column <em>again</em>.</p>
  
  <ol>
  <li>Is this the intended behavior?</li>
  <li>If I want two columns for anything over 768px, should I apply <em>both</em> classes? (<code>&lt;div class="col-sm-6 col-lg-6"&gt;</code>)</li>
  <li>Should <code>col-6</code> <em>also</em> be included? <code>&lt;div class="col-6 col-sm-6 col-lg-6"&gt;</code></li>
  </ol>