title: Twitter Bootstrap: non-responsive row in responsive layout
body: <p>I'm using a responsive fluid grid system on my site, and in most cases the responsive Bootstrap behaviour is what I want: on small screens, the grid columns become fluid and stack vertically.</p>
  
  <p>However, using grid nesting, inside a nested row this is not always the desired behaviour. There are some rows that are not supposed to be stacked vertically, regardless how small the screen is. This is exactly the behaviour of the whole grid when I completely disable all responsive CSS code, but obviously this is no alternative if the responsive behaviour is required for the outer rows.</p>
  
  <p>The relevant markup is:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span6"&gt;This column should be stacked on small devices.&lt;/div&gt;
          &lt;div class="span6"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span6"&gt;Nested row. This column should NOT be stacked on small devices.&lt;/div&gt;
                  &lt;div class="span6"&gt;Nested row. This column should NOT be stacked on small devices.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>See this <a href="http://jsfiddle.net/m4r73n/VzNRH/2/" rel="nofollow">jsfidde</a> for clarification.</p>
  
  <p>How would one best solve this problem? Is there a way to do it with the native bootstrap functions?</p>