title: Bootstrap responsive grid layout
body: <p>This is my Markup which is coded using twitter bootstrap fluid layout</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
    &lt;div class="span4"&gt;Col4&lt;/div&gt;
    &lt;div class="span8"&gt;Col8&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is working fine in Landscape mode. But in portrait i want to change the grid; e.g. the first div should occupy 2 columns and the second div should occupy 10 columns. </p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
    &lt;div class="span2"&gt;Col2&lt;/div&gt;
    &lt;div class="span10"&gt;Col10&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought of defining a new class as .row-colum {.span4;} in normal less file and using media query orientation:portrait overwrite .row-column {.span2;}. But i am getting less compilation error. </p>
  
  <p>This is what i thought of doing</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
    &lt;div class="row-column"&gt;Col2&lt;/div&gt;
    &lt;div class="span10"&gt;Col10&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any way which i can achieve this?</p>