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?

Solution 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/

Solution 2

You can do your own class like this:

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .col-xsl-6{ width: 50%; }
}

.col-xsl-6 is for landscape in mobile.

Solution 3

Bootstrap plays with screen widths and heights and it cannot detect the orientation itself. According to [1] you could still achieve something by applying some of the larger layout options (small, medium) for the horizontal orientation and keep the smaller ones on vertical (I mean those sm and xs and so on).

Of course all depends on the set of devices in your mind: this solution may apply if the set of devices is limited and you can by trial and error find the best fit combination. Otherwise you need some javascript to detect the exact orientation, like @Nono pointed out in his answer. That solution needs some code, mine could work out of box, if right combination is found.

---

My source:

[1] customizing bootstrap columns in portrait orientation for mobile devices