title: Mixing different types of columns in bootstrap
body: <p>Can I mix different columns (col-xs-<em>, col-sm-</em> etc) in my layout?</p>
  
  <p>For example, I have:</p>
  
  <pre><code>&lt;div class="col-xs-12"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-12"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>and more many col-xs columns.</p>
  
  <p>But now for example, I want to change first column from full width to half in tablets and monitors, so I added "col-sm-6 col-sm-offset-3" and remove "col-xs-12" because "col-sm-6" means "col-xs-12":</p>
  
  <pre><code>&lt;div class="col-sm-6 col-sm-offset-3"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-12"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>And it works, <strong>but this is correct with bootstrap grid system and standards?</strong></p>
  
  <p>Or Maybe I have to add "col-sm-*" to others? :</p>
  
  <pre><code>&lt;div class="col-sm-6 col-sm-offset-3"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-12"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6 col-sm-6"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6 col-sm-6"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Or maybe I have to keep "col-xs-12"?</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-6 col-sm-offset-3"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-12"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Or maybe I have to keep "col-xs-12" and add "col-sm-*" to others to have identical types in all divs?</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-6 col-sm-offset-3"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-12"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6 col-sm-6"&gt;
     ...
  &lt;/div&gt;
  &lt;div class="col-xs-6 col-sm-6"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Which versions is correct? How do I properly mix different types of columns? </p>