Bootstrap column view in portrait and landscape

Question

I am failry new to bootsrap and wanted to ask, is there anyway, that when the device screen is in Portrait to always use "md" size columns, and when it is in landscape to always use "xs" columns?

Answer 1

Extend Bootstrap CSS using new or altered media queries. Normally leaving the original bootstrap.css file and extending it with the changes is the best way, or future upgrades will be troublesome. You might only want to recreate the grid classes you want to use, for example:

@media (min-width: 992px) and (orientation:landscape) {
    .col-md-4 {
        // some properties
    }
}

@media (min-width: 992px) and (orientation:portrait) {
    .col-md-4 {
         // redefined
    }
}

As mentioned by Skelly, there is no orientation switch built into Bootstrap itself at this time.

Answer 2

Here is my actual solution, maybe helps someone

@media (orientation: portrait){
   .portrait{
       width: 100%;
   }
   /*div[class^='col-xs'], div[class*='col-xs']{
       width: 100%;
   }*/
}

Two solutions:

1- is to add "portrait" class to any div that you want to see in portrait with width=100%.

2- Uncomment and use the second rule on the media that applies width:100% to any div that have a class name that starts width col-xs