Sometimes it can be hard to arrange the grid in a way that works well on both mobile and desktop. To make this easier, we have a feature for changing the ordering on mobile with the "Mobile Order Priority" setting.
By default, the mobile grid will follow the desktop grid left-to-right, top-to-bottom. You can override this ordering for a tile by changing its "Mobile Order Priority" setting in the "Settings" tab.
By default, all tiles have a value of 0. Giving a tile a value of 1 would give that tile order priority compared to all tiles with a value less than 1. Conversely, setting the value to -1 would give all tiles with a value above it a priority. You can set the value to any number you like; higher-priority tiles will always be displayed before lower-priority tiles.
An example of how to order a grid section on small screens
To make this easier to visualize, let's have a look at an example grid. Consider the three-tile grid below:
By default, this order will be maintained on mobile. For the sake of readability, let's abbreviate each tile by its letter. The order you can see above is written as [A - B - C]. With no priorities set, this ordering would be the same on mobile, like below.
If you want the tiles to display in the order [B - A - C] on mobile, all you would need to do is change the priority for B to 1. It would then have a higher priority than the other tiles and display first.
Since the order for A and C is still determined by the desktop grid, if we change the desktop tile order as in the image below:
The new ordering on mobile would become [B - C - A]. The priority of B is still higher than that of A and C. Since A and C have the same priority, they will reflect the order in the desktop grid.
Since tiles with the same priority always maintain the desktop ordering, if we change the priority for C to 1 as well, the new order would be [C - B - A]. You can think of each number as a group, and these groups are always displayed from highest to lowest.
The easy way to order a grid section
Mobile Order Priority is useful when you need the grid to look slightly different on mobile. Any changes in the desktop layout will still be reflected on mobile for tiles with the same priority.
For a visual walkthrough of the same process, see the guide to how to order tiles on mobile in Zoomforth.