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?

To alternate image and text columns on desktop and stack them in a specific order on mobile, you need to properly set up your layout using Flexbox or Grid, and then adjust the order property on mobile view.

1. Use a Flexbox or Grid Layout on Desktop

• Use a Flexbox or CSS Grid container for each alternating section.
• Create a wrapper (e.g., section-row) that houses two divs: one for the image and one for the text.
• For alternate rows, manually reverse the order of the divs in the Webflow Designer for desktop (e.g., Text then Image, Image then Text) to achieve the zig-zag layout.

2. Set Mobile View to Stack Vertically

• Switch to mobile breakpoint in the Webflow Designer.
• Set the section-row container’s Flex direction to Column (or for Grid, adjust them to stack).
• This ensures the image and text stack vertically instead of side-by-side.

3. Adjust Order Using the Order Property

• If you want a consistent mobile order (e.g., always image first, text second) regardless of desktop order:
• Select the text div in the mobile breakpoint.
• Scroll to the Layout section in Style panel.
• Set Order to a higher number (e.g., 2).
• Set the image div’s order to a lower number (e.g., 1).
• Repeat this for each section so mobile flows image → text every time.

4. Double-Check for Conflicts

• Ensure no conflicting styles from larger breakpoints (like reversed flex direction) are overriding mobile settings.
• Avoid using Display: Grid unless you're comfortable managing its responsive reordering.

Summary

To alternate image and text on desktop and have a uniform order on mobile, use Flexbox, reverse divs for alternating desktop layout, and use the Order property on mobile to standardize stacking. Carefully adjust these settings on mobile breakpoints to avoid conflicts.