Twitter bootstrap 离子2响应式网格布局，根据屏幕大小固定列数

我四处搜索，但找不到如何实现网格布局，该布局根据离子2的屏幕大小具有不同但预先确定的列数

我需要什么： 我需要显示一个网格的项目有2列小屏幕宽度，3列中等屏幕宽度和4列大屏幕宽度。列的宽度将相等，并将完全填满屏幕宽度。如果我使用引导，我会这样做

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>

    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>

    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>

---

我的发现：我发现Ionic 2框架包括“responsive sm”、“responsive md”和“responsive lg”属性，这些属性使具有多个列的行变成具有全屏宽度的单个列。但是没有办法固定列数，因此它要么是X个列数，要么是1个列。

对于最新版本的Ionic，现在使用Grid API（）很容易做到这一点

下面是一个示例代码

<ion-grid>
    <ion-row wrap>
        <ion-col col-12 col-md-6 col-lg-4 col-xl-3 *ngFor="let package of arrayPackages">               
            <div text-center>
                <img [src]="package.urlImage">
            </div>
        </ion-col>
    </ion-row>
</ion-grid>