Different grid layout for portrait and Landscape in bootstrap

Question

I am making an Android app using Sencha. I am using this layout for responsive layout in mobiles and tablets

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
</div>

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?

Answer 1

I've used this before for web apps, but I didn't get it working with Cordova/PhoneGap, so you'll have to test it with Sencha.

@media screen and (min-aspect-ratio: 13/9){ } // landscape and 
@media screen and (max-aspect-ratio: 13/9){ } // portrait.

Had to dig out where I found it, but here is the original source: http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/