html - 是否可以更改离子排的顺序？

Question

我正在实现一个响应式网格，就像您在图像中看到的那样：

我知道可以更改 Ionic 中列的顺序，但是是否可以对行执行相同的操作？

例如，目前行的顺序是红黄绿。我希望它是大屏幕的绿色、红色和黄色。那可能吗？类似于offset-*orpush-*和pull-*但用于行的东西。

或者您会尝试找到更好的方法吗？也许是另一种使用列的结构，我们知道可以对其进行排序。

现在，这是我的代码：

  <ion-grid>
    <ion-row>
      <ion-col col-12>
        <ion-row>
          <ion-col>
            Things inside
          </ion-col>
        </ion-row>

        <ion-row>
          <ion-col>
            Things inside
          </ion-col>
        </ion-row>

        <!-- I want this row to be the first on large screens -->
        <ion-row>
          <ion-col>
            Things inside
          </ion-col>
        </ion-row>
      </ion-col>

      <ion-col col-12>
        Things inside
      </ion-col>
    </ion-row>
  </ion-grid>

Answer 1

• 将每一行内的数据移动到一个 javascript 对象并更改 UI 以实现一个 forEach 来加载所有数据

class ColData: any;
class RowData: ColData[];
class GridData: RowData[];

• 当屏幕尺寸是您想要的

window.attachEvent('onresize', function(event) {
  // trigger here
});

改变对象的顺序

PS：您可能必须使用 changedetector