How can I change the order of my grid layout in Webflow for mobile viewing?

To change the order of a grid layout for mobile view in Webflow, you'll need to adjust the grid settings or manually re-order grid children using CSS properties like grid-row or grid-column specific to mobile breakpoints.

​

1. Switch to Mobile Viewports

​

• Open your project in Webflow Designer.
• Use the viewport selector at the top center to switch to Tablet, Mobile Landscape, or Mobile Portrait.
• You’re now editing styles specific to that screen size and smaller.

​

2. Select the Grid Element

​

• Click on your Grid container to select it.
• Confirm it’s set to display type Grid in the Style panel.

​

3. Adjust Grid Child Order for Mobile

​

• Click on each element inside the grid (e.g., Grid Item 1, Grid Item 2).
• Under the Style panel, scroll to Layout, then use the grid row and grid column settings to move the item to a new position.

​

• • For example, you can set an item to Row 2 / Column 1 to move it below another in mobile layout.
  • Alternatively, use Auto-placement off (unchecked in Grid settings), then manually assign positions.

​

4. Use Grid Template Adjustments (if needed)

​

• Modify the grid template structure itself on mobile to show fewer columns (e.g., go from 3 columns to 1).
• Under Grid Layout Settings, reduce column count and adjust row heights as preferred.

​

5. Use Flexbox as an Alternative

​

• If you only need to reverse or change item order and it’s a simple layout, convert Grid to Flexbox.
• Apply flex direction column and use order property per item to reorder.

​

Summary

​

To change grid order on mobile in Webflow, select the grid element in mobile view, then adjust each child’s grid-row/grid-column placements or restructure the grid for smaller screens. Use Flexbox with custom order values as an alternative for simpler layouts.