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
- Use consistent parent-child structure with identical classes; alternate desktop layout using Flex Direction: Row and Row-Reverse.
- On mobile, switch to Flex Direction: Column and use Order settings to consistently stack image above text.
You're trying to create alternating image and text columns on desktop, and stack them in a consistent order on mobile, but the layout isn’t behaving as expected. This usually involves using Webflow’s flexbox or grid along with responsive reordering techniques.
1. Use a Consistent Structure for Each Row
- For each row (section with image and text), use a div block as a parent container (e.g., "Row Wrapper").
- Inside the parent, place two child divs: one for the image, one for the text.
- Use the same class names across all rows. Only apply modifiers (like combo classes) when needed.
2. Set Desktop Order Using Flexbox or Grid
- On Desktop, set the parent "Row Wrapper" to Display: Flex → Direction: Row.
- For alternating rows:
- Either create a separate class (or combo class) for reversed layout.
- Or, set Flex Direction: Row-Reverse for the alternating rows.
- This will alternate the image and text placement across rows.
3. Adjust Mobile Stack and Reorder
- On mobile (Tablet and below), set the "Row Wrapper" to Flex Direction: Column.
- By default, Flex Direction: Column will show children from top to bottom.
- For consistently stacking the image on top and text below, you need to override the order for previously reversed rows.
- Use the Order property in Webflow:
- On mobile, select the children inside a reversed row.
- Set Image div to Order: 1, Text div to Order: 2.
- This will place the image above text, regardless of their original order on desktop.
4. Common Issues to Avoid
- Avoid manually swapping the child elements instead of using Flex's direction or order settings.
- Do not use absolute positioning or float, as they prevent proper responsiveness.
- Make sure you're applying styles on the correct breakpoint (e.g., mobile landscape or portrait), as styling on desktop doesn't cascade in reverse.
Summary
Use flexbox with Row/Row-Reverse on desktop to alternate layouts, then use Flex Direction: Column and Order settings on mobile to consistently show images above text. Avoid manually reordering DOM structure—let Webflow styling control the layout.