Custom column layout breaks on mobile view — SharePoint Online Communication Site

Hi everyone,

I'm working on a SharePoint Online Communication Site and I've built a custom card section manually  each element (image, text, badge, link) was added as a separate web part and organized inside a column section.

On desktop it looks exactly as designed. The issue is on *mobile view*: all elements fall apart. The image sits alone at the top, the text below it disconnected, as if the column grouping doesn't exist at all.

I understand SharePoint collapses columns into a single column on mobile, but I'd expect it to at least respect the visual grouping of each block.

What I've already tried:

- "Embed" web part → only accepts iframe, HTML/CSS not supported

- "Script editor / Code snippet" web part → accepts inline CSS but it's not a sustainable solution for non-technical users

My question: Is there any native setting, web part, or no-code alternative that allows custom card layouts to look good on both desktop and mobile without breaking the grouping?

Thanks in advance.