Changing div stacking layout depending on screen size/orientation in ionic grid

I have html structure similar to this:

<div class="row">
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>
    <div class="col-sm-12 col-md-6 col-xl-3">
    </div>

    ...
</div>

that should stack bunch of divs in 1 column on small, 2 columns on medium and 4 columns on large screens…

Can someone help me how to do this in ionic framework?