Reordering block on mobile

  • 0754ben84
    January 23, 2026 at 1:31 am

    Hi guys,

    I’ve got these blocks on my page. They display exactly how I wat them to on desktop:

    But on mobile, they stack;

    Text
    Image
    Image
    Text

    How can I get them to display:

    Image
    Text
    Image
    Text

    I’ve provided a link to the page inthe secret squirrel box

    Thanks

  • George
    January 23, 2026 at 3:49 am

    Hello. Three things:

    1. On mobile, let the grid’s DISPLAY value to Default. This will allow the container to keep displaying as a grid on mobile, too.

    2. On mobile, set the grid’s GRID TEMPLATE COLUMNS value to 1fr.

    1fr grid template columns value

    3. On mobile, set the third grid container (the second image) to have an ORDER value of 1.

    Change grid container ORDER value

  • GeorgBNM
    January 26, 2026 at 6:59 am

    Hi George,

    Trying this with the (Feature Sections) Patterns 22 & 23 from GenerateBlocks Pro.

    On mobile I can’t change the order from

    text
    image
    text
    image
    text
    image

    to

    image
    text
    image
    text
    image
    text

    What’s the hint?

    Thank you!

    Best,
    Georg

  • George
    January 26, 2026 at 7:20 am

    Hello.

    Are you using those patterns as they are with their own sections or have you integrated them in one section? Can you please provide a URL?

  • GeorgBNM
    January 26, 2026 at 7:31 am

    Hi George,

    working only on localhost atm. Can’t share.

    I use the patterns as they are with changed image (url), removed tagline and second button and changed text content. The columns remain the same.

    Can you still help?

    Best,
    Georg

  • George
    January 26, 2026 at 7:42 am

    If you use the patterns as they are, there shouldn’t be an issue. I have tried it locally with the same exact patterns and it looks fine. That’s because the patterns are like this:

    Pattern 22
    Image – Text

    Pattern 23
    Text – Image

    No need to reorder.

  • GeorgBNM
    January 26, 2026 at 7:52 am

    Hi George,

    on mobile:

    Text
    Image

    Text
    Image

    Text
    Image

    Should be:

    Image
    Text

    Image
    Text

    Image
    Text

    Tried it with Patterns as they are, also. With no success.

    Thank you!

    Best,
    Georg

  • George
    January 26, 2026 at 8:23 am

    Ok, I see, those blocks are set as flex and have display property set as Block for tablet. Set Display to Flex for the second pattern on mobile, and FLEX DIRECTION to Column. Then, set ORDER to 1 for the first container (Text).

  • GeorgBNM
    January 26, 2026 at 8:32 am

    Hi George,

    Thanks, you pushed me in the right direction.

    In my case, setting Display to flex and Flex Direction to column reverse was enough.
    Setting order was not needed at all.

    Thanks a lot!

    Best,
    Georg

  • George
    January 26, 2026 at 8:48 am

    Ok, good, no problem!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.