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
Is it possible to upload pictures and information onto a Webflow website, display them, have a payment system for buying services, a notification/chat system, and a search system to find specific services? If so, how can this be done using Webflow's standard e-commerce plan or a third party tool?
Why aren't the individual project pages of my furniture business showing up on Google search results, even though I have updated the meta descriptions and titles on my Webflow site?
Has anyone experienced a situation where a CSS class is being added to the Body tag upon page load in Webflow, which overrides the default site styling? The attribute being added is 'data-wf-spring-theme-render' with a corresponding value. Thank you.
How can I add 'members only' products to a shop in Webflow for my client's project?
How can I retain the styling and spacing (such as bold lettering) when pasting text from a Word document into Webflow?
How can I create a full-width background video using a Vimeo embed without the controls and with autoplay, but without it being 100vw and 100vh in Webflow?
Can I duplicate and save my home page as another page in Webflow?
What tools have you used to build a website portal, specifically one that can be easily integrated with a Webflow site without extensive coding?
How can I change the map location or coordinates in the code using Webflow map clone?
How can I fix the non-responsive submit button on the slider form with custom code that I cloned and pasted into my Webflow website? Additionally, can I make the slider go to the next slide so users can book a meeting via Calendly embed?
Can I display ads on Webflow Instant Articles on both PC and mobile devices?
How can I add referral metadata for a Stripe customer in Webflow when integrating with Rewardful?
Can webpages be transferred from Wix to Webflow during website migration?
Can I overlay header text on top of a Lottie animation in Webflow for my website's header video?
How can I make a GIF a background in Webflow using a Div block?
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 fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked 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?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
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!