How can I achieve alternating columns on desktop view and change the order to display an image and text on responsive mobile view using Webflow? I have followed a guide but it's not working. Any advice?
TL;DR
- Wrap each image–text pair in a flex or grid container with horizontal layout on desktop.
- At the mobile breakpoint, switch the layout to vertical and adjust item order per row using layout order settings or switch to a 1-column grid.
You’re trying to create alternating image–text columns on desktop that stack as image above text on mobile. If your layout isn’t working responsively, it’s likely due to incorrect use of flex or grid settings or improper override at breakpoints.
1. Use Right Structure in Desktop View
- Wrap each section in a parent element (e.g.,
section) that uses Flexbox with horizontal direction (row) or Grid layout. - For example:
- Row 1: image left, text right
- Row 2: text left, image right
2. Set Consistent Class Naming
- Give each image and text block its own class or combo class so you can target them individually at breakpoints.
- For example:
image-blockandtext-block- Use combo classes if layout differs row to row (e.g.,
image-left,image-right)
3. Change to Vertical on Mobile
- On the Tablet or Mobile breakpoint, select the parent (e.g.,
section) and set Flex Direction to Vertical (Column). - This will stack the children vertically.
4. Manually Adjust Order for Alternating Rows
- Select the image or text block in the sections where you want to reverse the stacking order.
- Under Layout → Order, change the order value:
- Set the image to Order: 1
- Set the text to Order: 2
- Reverse these values where needed (e.g., if text appears first on desktop, make it order 2 on mobile).
5. Check for Hidden Style Conflicts
- Ensure you don’t have conflicting styles at the mobile breakpoint.
- Use the Navigator panel to confirm structure and applied classes.
- Make sure overridden styles are showing purple in the Style panel at mobile breakpoints.
6. Consider Using Grid Instead
- Webflow Grid allows auto layout reordering per breakpoint, often more intuitive than Flex.
- Set alternating layouts in Desktop, then at Mobile, stack grid rows by adjusting the grid area/sizing or simply setting grid to 1 column.
Summary
Build each image–text pair inside a flex or grid container, then override the flex direction or item order at the mobile breakpoint to stack vertically and control the display order. Use manual order control or Grid for flexible reflow at smaller screen sizes.
