How can I change the order of my grid layout in Webflow for mobile viewing?
TL;DR
- Switch to the mobile breakpoint in Webflow and select the grid container.
- Use “Edit Grid” to visually rearrange items or manually adjust grid row/column settings; alternatively, use Flexbox and the order property if the layout isn’t using Grid.
To change the order of your grid layout elements in Webflow for mobile, you'll use the grid area assignment and custom layout settings specific to mobile breakpoints.
1. Switch to the Mobile Breakpoint
- Open the Webflow Designer.
- At the top of the screen, select the mobile portrait or mobile landscape icon.
- This allows you to make layout changes that only affect mobile devices.
2. Select the Grid Element
- Click on the grid container you want to edit.
- In the right Style panel, ensure you’ve selected the grid layout control and not an individual child element yet.
3. Adjust Grid Areas and Order
- Click “Edit Grid” in the Style panel, which opens the visual grid editor.
- Drag and re-position cells manually to rearrange how child elements appear in the grid on mobile.
- You can also manually assign grid row and column start/end values for each child under the Layout section (e.g., Row Start: 2, Column Start: 1).
4. Use Display: Flex (If Not Using Grid)
- If you’re not using CSS Grid, you can change the parent element’s display to Flex for more control:
- Select the parent container.
- Set its Display to Flex (Vertical).
- Use the order property under the Children section to rearrange elements.
Summary
To reorder grid items for mobile in Webflow, switch to the mobile breakpoint, select your grid container, and use the Edit Grid function to rearrange cell positions. Alternatively, adjust each item's grid row/column settings or use Flexbox for simpler cases.