Is it possible to change the order of an ion-row?

Question

I'm implementing a responsive grid, like the one you can see in the image:

I know it is possible to change the order of the columns in Ionic, but is it possible to do the same with rows?

For example, currently, the order of the rows is red, yellow and green. I would like it to be green, red and yellow for large screens. Is that possible? Something like offset-* or push-* and pull-* but for rows.

Or would you try to find a better approach to this? Maybe another structure using columns, which we know can be ordered.

For now, this is the code I have:

  <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

• Move the data inside each row to a javascript object and change the UI to implement a forEach to load all the data

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

• when screen size is your desired

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

change the order of the object

PS: you may have to use changedetector