Column Stacking on Mobile View?


I hope someone can offer me some help, my brain is melting a little over here - I have a hero section on the website I’m working on, split into two columns. Each column has two sections in it.

It looks fine on tablet and above, and can be read left to right as it should be (i.e. my name, then “multidisciplinary designer…”, “hypercreative…”, then the photo of me). See below:

But as soon as I preview on mobile, the columns line up a little awkwardly. They’re not in the order I’d want (like the left-to-right description), but technically, I suppose they’re just showing as one column stacking on top of another, as they should.

There’s also a technical hitch in the image with absolute positioning - the spiral - offsetting the page width and content on mobile view. Which I’m sure is minor and easily corrected (maybe mobile specific positioning/sizing?), but is still attributing to the mobile view being problematic.

Is there a way I can reorder the content in my hero section for mobile view only? I want it to scroll down in the same order you’d read the sections on a tablet, or desktop.

I was thinking about making some mobile-only (otherwise hidden) clone sections in the order I want, but I don’t know if that’s convoluted. Any advice on all this would be so appreciated, thank you!

Here’s my site Read-Only

One way is to have them laid out in a grid instead of columns and then manually adjust the sections to go where you want on mobile. Another way, which is the one you mentioned is to duplicate the content and place it in the order you want then hide it on the other breakpoints.