title: Different grid layout for portrait and Landscape in bootstrap
body: <p>I am making an Android app using Sencha.
  I am using this layout for responsive layout in mobiles and tablets</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-6 col-sm-3"&gt;.col-xs-6 .col-sm-4&lt;/div&gt;
    &lt;div class="col-xs-6 col-sm-3"&gt;.col-xs-6 .col-sm-4&lt;/div&gt;
  
    &lt;div class="col-xs-6 col-sm-3"&gt;.col-xs-6 .col-sm-4&lt;/div&gt;
    &lt;div class="col-xs-6 col-sm-3"&gt;.col-xs-6 .col-sm-4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now i also want to specify a different grid layout when i switch from portrait to landscape mode .For example,in mobile screen, i want to use col-xs-6 in portrait mode and col-xs-3 in landscape mode. So how do i do that?</p>