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 Flex Direction: Row for desktop.
  • On mobile breakpoint, change Flex Direction to Column Reverse to display text above image.

To reverse the order of an image and text on mobile view in Webflow (text above image), while keeping their default order on desktop, you need to adjust the Flexbox direction for mobile breakpoints.

1. Use a Flex Container for Layout

  • Wrap the image and text in a Div Block.
  • Select the wrapping Div Block, then in the Style panel, set Display: Flex.
  • Set Flex Direction: Row for desktop to keep the default side-by-side order.

2. Change Flex Direction on Mobile

  • Switch to the portrait (mobile) breakpoint in the Webflow Designer.
  • Select the same Flex container.
  • Change Flex Direction to Column Reverse—this places the last child (the image) below the first child (the text).

3. Confirm Element Order

  • Make sure the text element is listed above the image within the container in the Navigator. Since Column Reverse flips the visual order, this ensures text appears above the image on mobile.

4. Adjust Spacing

  • After changing the layout direction, inspect and adjust margins/paddings to maintain good visual spacing on all breakpoints.

Summary

Use Flex Direction: Column Reverse on smaller breakpoints to flip the vertical order of text and image while keeping the side-by-side layout on desktop. This method is fully responsive and preserves semantic structure.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why am I getting a 400 Bad Request error when trying to change a reference field that references another collection in Webflow CMS?
How can I create a background scroll interaction effect using Webflow?
Are there any tutorials on integrating native Webflow and Bubble for user signups, logins, forums, and user interaction perks, while keeping Webflow as the front end and utilizing Bubble as the backend for features like building a forum?
How can I disable the dragging and touch swiping behavior in Webflow sliders?
How can I fix the issue with sections passing under in Safari when using position sticky and position relative in Webflow?
What is the best way to set up shipping for an online store on Webflow? Is it possible to assign a "shipping from" address for certain products that are drop shipped from a warehouse location? Can I display the shipping prices from my supplier's online store for clients?
How can I create a side-scroll effect in Webflow where content, such as images, can be scrolled left and right on mobile without using sliders?
Does Webflow support IDEAL as a payment option and provide full STRIPE integration?
When will Webflow allow for separating interactions from the element they are applied to?
Why does a POST request to my webhook in Webflow open a new tab and display the JSON response instead of showing a success message within Webflow?
Can Webflow filter a collection list on a collection page using a value from a record in the collection?
How can I embed the real-time menu from SinglePlatform onto my Webflow website?
Can I replace a font with my preferred one in Webflow without having to manually change each piece of text individually?
Why are the 1st and the 5th containers in my Webflow 101 course not taking the full width of the viewport as they did before?
What is a simple step-by-step guide for setting up fullpage.js in Webflow?
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 use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?