Ionic GridSystem

i want to X Y to be in the same "row" if the screen is medium or above and x y on seperate rows if the screen is below medium. I first tried:

<ion-content padding>
    <div col-sm-12 col-md-6>x</div>
    <div col-sm-12 col-md-6>y</div>
</ion-content>

But no matter how wide the screen is x and y always got printed in seperat rows. Then i tried

<ion-content padding>
  <ion-col col-sm-12 col-md-6>x</ion-col>
  <ion-col col-sm-12 col-md-6>y</ion-col>
</ion-content>

And now x and y are printed in the same row no matter what.

What am i doing wrong?

Im using Ionic 2 and i have bootstrap: [IonicApp] inside my app.module.ts