Let’s say I have a layout involving 2 sections – in the top section, there are two columns: text and then a photo. In the bottom section, the opposite: a photo and then text. While this layout looks good on desktop screens, when everything collapses to the mobile view the flow of content is spoiled because you get: text, photo, photo, text. Ideally I’d like to configure my layout so that the columns stack to text, photo, text, photo on mobile views.
I thought about making an alternative 2nd section visible only to mobile with the columns reversed, and hiding the original one to mobile, but then I would be worried about the impact on page load speed and SEO. Is there an alternative solution?