是否可以更改离子排的顺序？答案

【问题标题】：Is it possible to change the order of an ion-row?是否可以更改离子排的顺序？
【发布时间】：2021-08-06 03:58:42
【问题描述】：

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

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

例如，目前，行的顺序是红、黄、绿。 我希望大屏幕显示为绿色、红色和黄色。这可能吗？类似于 offset-* or push-* and 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>

【问题讨论】：

我知道您可以在 Web 上的 flex 父级内部使用 CSS 属性 order。我会试一试，看看会发生什么：developer.mozilla.org/en-US/docs/Web/CSS/…
这可能也有帮助：ionicframework.com/docs/api/reorder-group
感谢 Mozilla 资源（希望我需要支持的 IE 不会过多抱怨 flex-direction）。关于 Ionic，我认为它适用于 Ionic 4，不是吗？不确定这是否适用于 Ionic 3。

标签： html ionic3 responsive ion-grid

【解决方案1】：

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

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

当你想要屏幕尺寸时

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

改变对象的顺序

PS：你可能不得不使用 changedetector

【讨论】：