Ionic Cards Reorder on Different Screen Sizes


I have two cards in a col so they are side by side on full browser window.

Let’s call the card on the left “Card A” and the card on the right “Card B”.

When you resize to mobile size browser window the cards are on top of each other. “Card A” then “Card B” is below it. I want to know how to change this.

So in full size = “Card A” on the left. “Card B” on the right.
In mobile size = “Card B” on top. “Card A” on bottom.

What is this called? Is this flex?

Thank you in advance for your help!

Look at placing your cards inside the Ion-grid. There are features in that component that will allow you to control display order.

Good luck.

PS: I am sure there are other solutions, this was the first that popped into my head.

Thank you for your reply. The cards actually are in an ion-grid. I just do not know how I could make them behave as I described in my post.