Possible to re-order columns based on screen size?

Ionic Framework
1

Bootstrap has a class for you to re-order columns based on screen size as described here: Grid system · Bootstrap

Does anyone know if Ionic (Angular) offers anything similar? I’ve tried searching on Google and can’t find anything. Or is it a case of pushing/pulling columns instead?

Many thanks

2
3

Where in the docs does it specify column ordering based on breakpoints?

4

Unfortunately, it seems the ion-grid Documentation does not come up with a solution to this problem. I thought you can achieve what you want by using push-xs and pull-xs in a way that on mobile layout the first column is pushed by 12 columns and the second column is pulled by 12 columns, essentially switching their positions. But this doesn’t work. The columns just get pushed and pulled along their horizontal axis.

What I did instead was this:

HTML:

<ion-grid>
  <ion-row class="order-xs-reverse">
    <ion-col size-xs="12" size-lg="6">First Column</ion-col>
    <ion-col size-xs="12" size-lg="6">Second Column</ion-col>
  </ion-row>
</ion-grid>

SCSS:

.order-xs-reverse {
    flex-direction: column-reverse;
}

@media screen and (min-width: 992px) {
    .order-xs-reverse {
        flex-direction: initial;
    }
}

This works for me.

Stackblitz: Ionic resize columns based on viewport size - StackBlitz