How to control order of blocks in mobile

  • Unknown's avatar
    guppin · Member ·

    I am using the default block editor to build my WordPress website. I want to display two images on the left and right of my page (center aligned to each other) with text above them (top aligned to each other). I did this adding a 50/50 column and putting a paragraph block in each column, then adding another 50/50 column and putting an image block in each column:

    text 1 text 2
    image 1 image 2

    This looks great on desktop, but on mobile the two columns appear as one stack, with the text appearing first and then the images appearing:

    text 1
    text 2
    image 1
    image 2

    I do want the columns to appear as a single stack on mobile, but I want the text and images to appear together:

    text 1
    image 1
    text 2
    image 2

    How can I achieve this? Is there a way to specify what order blocks appear on mobile, either through the block editor, CSS, or a plugin? Or is there another way I should be constructing the page?

    I have tried putting the text and images in stack blocks, which fixes the order of appearance on mobile but I lose the ability to top align the text and center align the images. The WordPress block editor does not let me align the contents of different stacks together. As such, if one text is, for example, two lines while the other text is five lines, the image for the text with five lines appears far below the other image on the page on desktop. I want the images to be aligned to each other no matter how long the text is, so this is not ideal.

    I have also tried using image captions instead, but the text appears below the images (also not ideal) and far too close to the image for my liking. I have not found a way to increase the spacing between the image and the caption through CSS.

    Any help with this issue would be appreciated. It seems like such a simple design, but I can’t figure it out myself!

  • aleone89 · Staff ·

    Hello there,

    Many thanks for reaching out.

    Are you able to confirm the URL of the website that you need assistance with please?

  • The topic ‘How to control order of blocks in mobile’ is closed to new replies.