ordering stacked blocks for mobile

[eytcoaching]

I’m trying to see if I can order which blocks show first in mobile mode? I have a media and text block where the media is on the right in the desktop version but the alignment doesn’t work in mobile. Any way to prioritize it in this theme?

[Andy]

With the Media & Text block, the ‘Stack on mobile’ option will make the image and the text stacked one above the other when viewed on mobile.

If you want to keep the left/right alignment, simply toggle the ‘Stack on mobile’ option to off, and the left/right alignment will still be visible on mobile.

[eytcoaching]

But is there a way to determine which block goes on top if it stacks? the other view wasn’t the best so I didn’t keep that option.

[Andy]

If I am understanding correctly, when the media is on the right, on mobile the image is below the text, but you want the image to be above the text.

This CSS, added to Customize > Additional CSS will put the image on top:

@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media {
        -ms-grid-row: 1;
        grid-row: 1;
    }
    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
        -ms-grid-row: 2;
        grid-row: 2;
    }
}

[Author]

Posts