Ordering Columns

There are times when you need to rearrange grid items dynamically based on different screen sizes. Amazium provides order modifier classes to help shift items to the start or end of a grid, both on desktop and mobile.

Available Classes:

.grid__item--alignStart → Moves the item to the first position (all devices).
.grid__item--alignEnd → Moves the item to the last position (all devices).
.grid__item--alignStartMobile → Moves the item to the first position on mobile screens.
.grid__item--alignEndMobile → Moves the item to the last position on mobile screens.

First, but last .item--alignEnd

Second

Third

First

Second

Third, but first .item--alignStart

First, but last on mobile .item--alignEndMobile

Second

Third

First

Second

Third, but first on mobile .item--alignStartMobile

Breakdown:

The first item (with .grid__item--alignEnd) moves to the end of the grid on all devices.
The third item (with .grid__item--alignStartMobile) moves to the start only on mobile screens.
The second item stays in its default position.

Why use These?

These classes allow you to adjust layouts for different screen sizes without modifying the HTML structure, making it easier to maintain and ensuring a responsive, flexible grid.