Columns & Grid blocks – mobile layout problem

  • md_quer

    (@mdquer)


    1 month ago

    Hi everyone,

    I’m using a custom WordPress block theme and I’m running into a big problem with mobile layout.

    I want this:

    Desktop:
    Image | Text
    Text | Image

    But on mobile it stacks like this:
    Image
    Text
    Text
    Image or

    Text
    image
    image
    text

    I’ve tried both the Columns block and the Grid (Group) block – the same issue happens with both.

    This seems to happen in any block theme, TT5, Greyd, Ollie etc, no matter which one I use. Right now, it’s basically impossible to make a professional website with the block editor in 2026 for mobile, because layouts like this don’t work properly. Any page builder can handle this much better.

    The only block that works somewhat is the old Media & Text block, but it’s outdated and the spacing often doesn’t match, so it’s not a real solution.

    Is there a proper way to make alternating image/text layouts display correctly on mobile, or is this just a limitation of the block editor?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter md_quer

    (@mdquer)

    1 month ago

    https://postimg.cc/QFWrTbMS

    Thread Starter md_quer

    (@mdquer)

    1 month ago

    I know, that this is not wrong per se, but on mobile it hast to be the other way round.

    Moderator bcworkz

    (@bcworkz)

    1 month ago

    As you acknowledge, the mobile stack is in the order of the HTML elements, so it’s not technically “wrong”, but undesirable all the same. You could use CSS flex box properties to alter the order of all right justified text/image rows so that the image stacks above its related text for narrow mobile displays. Thus this seems to me more of a theme issue than a fundamental issue with the block editor model.

    bvbaked

    (@bvbaked)

    1 month ago

    This is not wrong, and not a limitation of the theme or the block editor. It is the expected behavior of flex containers.

    If you want it the other way around, you’ll have to use either a flex-direction: column-reverse or set an order. This then introduces some confusion with accessible technology that the content displayed is no longer following the order of what a screen-reader would announce…

    I guess if you don’t care about that, then change it, but the way this works is best practice so it doesn’t have to be the other way – that’s just the way you want it

    Moderator threadi

    (@threadi)

    1 month ago

    Unfortunately, the Block Editor does not provide many options for controlling the mobile view here. As already mentioned, the order is determined by the styles used.

    In my opinion, you have three options:

    I also like to use Media & Text. I would by no means describe it as “outdated.” It is an actively maintained block in the Gutenberg directory. And yes, it can be a bit tricky, but it is still well suited for many use cases.

    Thread Starter md_quer

    (@mdquer)

    1 month ago

    Thank you really for all your suggestions ! I think i will use – when necessary the custom CSS with column -reverse. But ! i have to accept wordpress as is. I see the problem with accessible technology now, which I hadn’t fully considered before. It’s a balancing act between sleek design and accessibility—but in the end, accessibility should win 🤷‍♀️

    Thread Starter md_quer

    (@mdquer)

    1 month ago

    And Yes – Media & Text was fine … haha, but you cannot do images with border and such things… 😅

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.