Is there a way to reverse the order of grid items for tablet and mobile devices in Webflow?
TL;DR
- Manually rearrange grid items in Grid Edit Mode on tablet/mobile breakpoints to customize their order.
- Alternatively, use flex containers inside grid cells with reverse direction or adjust the Order property via the Style panel.
You can reverse the order of grid items on tablet and mobile in Webflow by adjusting their placement manually or using flexbox within grid cells.
1. Use Manual Grid Placement Overrides
- On tablet and smaller breakpoints, select the grid container.
- Click the grid edit mode (pencil icon) to manually rearrange grid children.
- Drag and drop or adjust the row/column positioning of each grid item.
- This allows a custom order that differs from desktop.
2. Switch to Flexbox inside Grid Cells (Optional)
- If you're having trouble reordering within the grid, consider placing a flex container inside a grid cell.
- On smaller breakpoints, set that flex container's Direction to Reverse Column or Reverse Row depending on layout needs.
3. Consider Using Custom Order Property
- Select each grid child item, go to Style panel, and under Layout, adjust the Order property.
- This only works if you’ve switched the grid to a flex layout or div wrapper.
- The Order property allows full control over sequence without changing structure.
Summary
To reverse grid item order on tablet and mobile, either manually rearrange item placement in grid edit mode for each breakpoint or wrap items in a flex container and apply reverse direction or custom order styles.
