How to hide a container on mobile, or swap columns on mobile

Hi. I am a newbie from Elementor here, so appreciate your help.

In Elementor there is an option to swap columns on mobile (e.g. if I have an image on the right on desktop, it shows below the Header on mobile, I want to show the image above the header on mobile, and to the right on desktop and tablet). The other option to achieve this that I had in Elementor was to hide the whole section on Mobile, and then just build a new section that only shows on Mobile, and hide the ā€œDesktopā€ section when viewing on mobile. Is any of this possible?
Thanks

Hello @msc007!

on the top bar inside the builder mode, you can switch between different breakpoints. If you change the elements’ order in one of them, then shouldn’t this change remain for this particular breakpoint?

But if there is no such native capability in the builder, you could use typical CSS media queries for specific breakpoints, to show or hide an element or to change the alignment/orientation.

I haven’t really got to the point of making changes for tablet or mobile view yet, but this is what I whould try first. So forgive me if what I say is mistaken! :slight_smile:

On the mobile breakpoint, set the container’s display (Content tab > Display) to ā€˜none’ to hide it.
To swap columns on mobile, you can either reverse the flex direction or set the flex display order on each column.

4 Likes

Thank you - thats what I was looking for, but was ā€œcluelessā€ - you don’t know what you don’t know…
Thank you

Thank you! I was also looking for this! Great help @simon !

Incredible fix and should be in the wiki IMO. There’s a bunch of components that don’t really work with breakpoints but this works fluidly.

For my use case, I wanted to have two different headers; on mobile, nav - logo - button, on desktop, logo - nav - button. I ended up making two top-level Container elements and hiding the desktop one on mobile breakpoint and vice versa. Works very well.