How to re-order content inside multiple rows of columns on mobile

As we discussed before, the proficient way to create columns using Grid block is to add all containers into one Grid. For more info:

How to Add Multiple Rows of Columns

But how to re-order the content in multiple rows of columns for mobile? Let’s take a look at this example:

To follow the default order showed in list view, the default mobile isn’t what we are looking for. How do we transfer it to the excepted layout?

GenerateTips

We can use the order feature of Grid block.

Based on the expected mobile layout, we marked out the content order we are looking for.

Then we can select each container and set its defined order.