How can I reverse the order of an image and text in Webflow so that the text appears above the image on mobile view while maintaining the original order on desktop view?

TL;DR
  • Use Flexbox on the parent element, setting the image and text order for desktop view.
  • Switch to mobile view, adjust the order of the text above the image using Flex Child Settings.
  • Preview the site to ensure correct order on mobile while maintaining the desktop arrangement.

Reversing the order of an image and text in Webflow for different device views requires using Flexbox properties. Here's a step-by-step guide to achieve this layout change.

​

1. Use Flexbox for Layout

  • Select the parent element containing both the image and text. Ensure it's set to display: flex. This will allow you to use Flexbox properties to reorder child elements.

​

2. Set Initial Order on Desktop

  • Within the Flexbox settings, make sure that the order of the child elements (image and text) is set as desired for the desktop view. This is usually the order they appear naturally in your HTML if you haven't intentionally changed it.

​

3. Adjust Order for Mobile View

  • Switch to the mobile view in Webflow's Designer by clicking on the mobile device icon.
  • Select the text element and go to the Style panel. Look for the Flex Child Settings.
  • Set the Order value to something higher (e.g., order: 1).
  • Select the image and set its Order value to a lower number (e.g., order: 0).
  • By increasing the order of the text above the image, you effectively reverse their positions for mobile view.

​

4. Preview Changes

  • Preview your site on different devices using Webflow’s built-in preview tool. Ensure that the text appears above the image on mobile while maintaining the original order on desktop.

​

Summary

To reverse the order of an image and text in Webflow for mobile while maintaining the desktop arrangement, use Flexbox on the parent element: adjust the order properties for the text and image specifically in the mobile view.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I use getCurrentLang() in Webflow to determine the language code for a multi-language website with Weglot translation integration?
Can the PDF file link displayed in the browser be modified to remove the Webflow reference?
How can I create a smooth scroll and lock to section on click with a horizontal scroll in Webflow for a pizza shop's category menu on a client site in Brooklyn?
How can I remove the 'Tap to Unmute' button that appears on top of autoplay videos on mobile in Webflow?
Does Webflow (free plan) have a design panel that includes shape tools like lines and squares for creating designs?
How can I upload a Dropbox video and set it as the background on my webpage using Webflow? My browser is Safari 9, and I have been struggling with the code.
How can I turn the sound off/on on the background video in Webflow, either natively or through a workaround? It's for a movie site and having audio in the background would be helpful. Should I separate the audio and video and control the audio with a separate HTML 5 to avoid sync issues? Thank you.
Is there a way to identify tablets without using breakpoints in Webflow, in order to ensure hover effects and menus work properly on devices like the iPad Pro?
Is it possible to integrate Webflow with third-party app frameworks like Ember, Angular, or Knockout for declarative binding functionality, and why might it not be working when following tutorials and including the appropriate libraries and data-binds?
How can I make a background video fullscreen on Webflow, specifically on screens with a resolution of 1920px and above, while still maintaining full screen on all other resolutions? The video I have is 1920x1080 and I don't mind if it appears pixelated on larger resolutions as long as it fills the screen. Why is it so difficult to achieve this? I work with game engines but I'm still struggling with this tool.
Has anyone here used Webflow and can share their experience?
How can I create a script in Webflow to close modals with embedded videos when the .close-modal button is clicked?
How can I type Vietnamese language into Webflow CMS blog posts with the correct fonts?
Is it possible to have different product pages in Webflow that display specific information for each product, or are there any workarounds for this limitation?
Is it possible to have visitors add filters to the FAQ page on my Webflow website using an input field or something similar, while still allowing for a general site search in the future?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?