Changing an elements position on mobile view without it changing desktop

Design help Layout & Design
1

I have a column with an image in the left column and some text on the right column.

On mobile view the image displays above the text and id like to reverse that so the text is above the image while maintaining the way it is on desktop view.

I tried just reversing them on the mobile editor and also tried copying the text and adding above the image and hiding the text below but it moved it on the desk top version. Any idea how to accomplish this?

Screen Shot 2022-09-06 at 11.24.45 AM
Screen Shot 2022-09-06 at 11.24.45 AM1788Ă—1282 114 KB

Here is my public share link: LINK
(how to access public share link)

2

Hey, @tenzin11 if you could please share your read-only link that would be helpful!
Thanks!

3

Hey, i figured it out! I just made a copy, reversed them, and hide it on desktop view.

1 Like
4

Whoop whoop! Very nice!

6

Another way to do that in the future is;

  • Use a flexbox, and change the orientation and direction of flow in your mobile breakpoint

  • Or, use a CSS grid, and changed the fixed positions in your mobile breakpoint.

Both of these layout approaches define aspects of layout via CSS, which Webflow gives you breakpoint-specific access to. They’re very powerful when you learn to use them well.

1 Like
7

Probably a less load intensive approach to think about would be to ditch the copy and instead set your grid to “manual” (i think you mentioned this was in a grid? if not, you could add a grid) which then lets you move the grid items into any cell you like. Leave it as-is on all breakpoints except mobile, just manually move it.

Hope that helps!