Webflow sync, pageviews & more.
NEW

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
  • Wrap image and text in a flex container with horizontal (row) layout for desktop.
  • Set the container to column-reverse on mobile to reverse the order, and adjust spacing as needed.

To reverse the order of image and text elements on mobile view in Webflow while maintaining their desktop layout, you can adjust the layout using Flexbox combined with responsive settings.

1. Use a Flexbox Container

  • Wrap the image and text elements inside a div block (container).
  • Select the container and go to the Style panel.
  • Under Layout, set it to Flex and choose Horizontal (Row) for desktop.

2. Set Flex Direction for Mobile

  • While still selecting the container, switch to the Mobile Portrait view in the top-responsive nav bar.
  • In the Style panel, change the flex direction to Vertical (Column Reverse).
  • This will reverse the stacking order so that text appears above the image on mobile.

3. Ensure No Manual Positioning Conflicts

  • Make sure the individual text and image elements do not have custom positioning (absolute/fixed) that could override the flex layout.
  • Check that margins and paddings are adjusted so layout changes don’t introduce gaps or overlaps.

4. Add Responsive Spacing if Needed

  • You may need to tweak padding or margin values specifically for mobile to optimize spacing now that the content order has changed.

Summary

Wrap the image and text in a flex container, set the desktop layout to row, and use column-reverse on mobile view. This will swap the order visually on smaller screens without affecting the desktop display.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a Webflow button with a white stroke that fills left to right with color upon hover using timed actions or transition easing?
How do I prevent the success message from scrolling out of view to the bottom of the page after submitting a form on a site built in Webflow?
Where can I find the first buy button embedded on the "Products Template" dynamic collection page in Webflow?
How can I edit the existing link on the logo in the top left corner of my Webflow homepage? It doesn't seem to be wrapped around the SVG and appears below the image.
Can I create a branded email address for my client's site hosted on Webflow? If not, what is an alternative solution?
How can I direct form submissions to different email addresses in Webflow?
How can I implement a full page lottie animation with Webflow that maintains its aspect ratio regardless of the viewport size? I have already tried using "object-fit: cover" but it didn't solve the issue. I found that I need to use the parameter "rendererSettings:{ preserveAspectRatio:'none' }" in Bodymovin, but I'm not sure how to implement it while still using the Webflow interface for lottie animation. Any suggestions?
How can I add a custom map marker to Google Maps using Webflow?
How can I optimize my website using Webflow and other third-party tools or integrations?
How can I fix scaling issues for different screen sizes and the large space appearing on the right side of my Webflow site?
How can I achieve a blurred border effect on one side of a DIV using Webflow without using inner box shadow or affecting transparency?
What are the current challenges facing Webflow, particularly in terms of customer feedback, performance issues, and customer support?
Is it possible to override background color in a Webflow symbol?
Can active hosting plans be transferred when moving a Webflow site to a different account?
How can I use JavaScript in Webflow to make a section disappear and display a success message only if a form submission is successful?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
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?