title: Twitter Bootstrap: how to not scale columns to single row under 767px
body: <p>as you already know twitter bootstrap scales each span* to 100% width if you are on 767px and below.
  So, for instance, if we have two columns on 768px and above:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span6"&gt;Column 1&lt;/div&gt;
      &lt;div class="span6"&gt;Column 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is the result:</p>
  
  <pre><code>| column 1 | column 2 | &lt;- desktops
  </code></pre>
  
  <p>on 767px and below they will collapse to:</p>
  
  <pre><code>| column 1 |   &lt;- tablets, mobile
  | column 2 |
  </code></pre>
  
  <p>and this is what's supposed to be. <br>
  But… how is you approach if you want this behavior for a row, but not for another? <br>
  How to left two (or more) columns even under 767px? </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span6"&gt;Column 1&lt;/div&gt;
      &lt;div class="span6"&gt;Column 2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="special row"&gt;
      &lt;div class="span6"&gt;Column 1&lt;/div&gt;
      &lt;div class="span6"&gt;Column 2&lt;/div&gt;
  &lt;/div&gt;
  
  | column 1 | column 2 | &lt;- desktops
  | column 1 | column 2 | 
  
  | column 1 |   &lt;- tablets, mobile
  | column 2 |
  | c1 |  c2 |
  </code></pre>
  
  <p>I'm really curious.</p>