Ionic responsive grid is not responsive

Ionic Framework ionic-v3
1

Still, any way to make the new bootstrap-like Grid responsive?

I’ve created a skeleton project in Visual Studio 2017 (Ionic CLI v.3.7.0).

The documentation says, that the following columns:

<ion-grid>
  <ion-row>
    <ion-col col-12 col-sm>
      1 of 4
    </ion-col>
    <ion-col col-12 col-sm>
      2 of 4
    </ion-col>
    <ion-col col-12 col-sm>
      3 of 4
    </ion-col>
    <ion-col col-12 col-sm>
      4 of 4
    </ion-col>
  </ion-row>
</ion-grid>

should become rows on small screen sizes, but they never do (for me, neither in Chrome, nor with Cordova Simulate).

Am I missing something? Is there any working example of a responsive grid?

2

Just for the sake of anyone bumping on this post (as I did), solution in Ionic4 (at least in my case) is like this:

<ion-grid>
  <ion-row>
    <ion-col size-lg="6" size-sm="12">...</ion-col>
    <ion-col size-lg="6" size-sm="12">...</ion-col>
  </ion-row>
  <ion-row>
    <ion-col  size-lg="6" size-sm="12">...</ion-col>
    <ion-col  size-lg="6" size-sm="12">...</ion-col>
  </ion-row>
</ion-grid>

Basically you are instructing that for large screens (>=960px) each col uses 50% of the available space (6/12), while for small screens each col will use 100% of the available width (effectively staking up everything).