How can I alternate the order of images and text blocks on desktop and keep the order the same on mobile in Webflow?

Published on
September 22, 2023

To alternate the order of images and text blocks on desktop while keeping the same order on mobile in Webflow, you can utilize the Flexbox layout capabilities and the "Order" property. Here's a step-by-step guide on how to achieve this:

  1. Open your Webflow project and navigate to the desired page or create a new one.
  2. Add a "Section" element that will contain both the image and text blocks.
  3. Inside the section, add a "Div Block" element. This will act as a container for your image block.
  4. Add an "Image" element inside the "Div Block" and upload/select your desired image.
  5. Next, add another "Div Block" element inside the section. This will act as a container for your text block.
  6. Add a "Text" element inside the second "Div Block" and enter your desired content.
  7. Select the section element, and in the style panel, set its display property to "Flex".
  8. In the flex layout settings, choose the direction that suits your design needs (e.g., "Horizontal" for side-by-side alignment) and adjust the alignment, spacing, and other properties as desired.
  9. Now, to alternate the order for desktop, select the first "Div Block" (containing the image) and in the style panel, find the "Order" property. Set it to a value higher than the "Order" value of the second "Div Block" (containing the text). For example, set the first "Div Block" to an order of 2, and the second one to an order of 1.
  10. Preview the web page in the designer, and you'll see that the image and text blocks have switched positions on desktop while maintaining their original order on mobile.

By utilizing Flexbox and the "Order" property, you can easily modify the layout order of elements on desktop and keep it consistent on mobile.

Additional questions related to this topic:

  1. How do I change the order of elements in Webflow?
  2. Can I switch the positions of images and text blocks on different devices in Webflow?
  3. What is Flexbox and how can it be used in Webflow to create flexible layouts?