How do differentiate the grid between landscape and portrait - ionic2

Question

I'm aware of how to work with the grid in:
https://ionicframework.com/docs/theming/responsive-grid/
But what I don't understand is how to structure it - for landscape vs portrait ?
I'm looking for a way to do this, but col-[xs|sm|md] has no affect ( only on devices it has affect - i.e: phone vs tablet )
Portrait
Landscape

Answer 1

You should edit you .scss and use css media queries to get what you want.
If you want to apply this for whole apps you can edit app.scss or else you can edit your-page.scss file.
#media (orientation: landscape) {
.col {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
}
}
further more, you may read this https://developer.mozilla.org/id/docs/Web/Guide/CSS/Media_queries
Edited
If your columns are dynamic, it can't be done automatically, you need to add class to your ion-col, e.g.
<ion-col class="col-class-1">This text 1</ion-col>
<ion-col class="col-class-2">This text 2</ion-col>
and edit your scss
#media (orientation: landscape) {
.col.col-class-1 {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
}
.col.col-class-2 {
flex: 0 0 100px;
width: 100px;
max-width: 100px;
}
}

Answer 2

Try with:
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Documentation: https://ionicframework.com/docs/v1/components/#grid-responsive

Answer 3

Found the issue,
Regular grid of Ionic 2 does covert this, but the thing was that iPhone 5 for example has:
Landscape, W: 568px, H: 320px
Portrait , W: 320px, H: 568px
But the Ionic 2 defaults is:
xs 0
sm 576px <= Landscape width (568px) still less than that
So I've edited the file:
variables.scss
$grid-breakpoints: (
xs: 0,
sm: 420px, <= Lowered the value
md: 768px,
lg: 1024px
);
Which made the columns in the grid to work out of the box
<ion-grid>
<ion-row>
<ion-col col-12 col-sm-6 *ngFor="let card of cards">
Card X
</ion-col>
</ion-row>
</ion-grid>
Portrait: will show a single card in a "row" (stacked cards, col-12 )
Landscape: will show two cards in a "row" (12/col-6 = 2 columns in a row)