Media & Text Block: Allow reversed stacking order on mobile.

[shoelaced]

Is your feature request related to a problem? Please describe.

It is common to use an image-beside-text layout in situations where the content on the left looks better underneath the content on the right when stacked.

For example, the common layout of:

[image]   [text ]
[text ]   [image]
[image]   [text ]

It's common to want to stack it on mobile like:

[image]
[text ]
[image]
[text ]
[image]
[text ]

Currently this layout isn't possible.

Describe the solution you'd like

It would be great if the Media & Text block could have a "reverse stacking order" setting when "stack on mobile" is enabled. As a side note, stacking on mobile and reversing the order should ideally also be available on the Columns block.

Describe alternatives you've considered

Adding a class in the Advanced section (only works for bespoke sites...), or installing a whole other block plugin with better responsive behavior and disabling the default (which is what I usually do). However, neither is ideal for the average user when such basic functionality is needed.

[cr0ybot]

I would still like this functionality, even though it looks like the Media & Text block now defaults to placing the media on top when stacked (used to stack in the order displayed on desktop). We pretty much want the image on top 99% of the time on mobile, but it would be nice to have the option.

[getdave]

This forum user would also like this feature to be added

[masperber]

Requested by a WordPress.com customer in live chat.

[MGParisi]

Yep, it would be a very necessary option.

[MelanieHayn]

Agree. For our site, when we have text and media blocks, we want the text on top on mobile and the image on the bottom. Having a choice in the options panel would be ideal.

[carolinan]

I re-tested this with WordPress 6.2.2 (Gutenberg does not need to be activated)
The option "Stack on mobile" puts the image first, no matter if the image is on the left or right side.
I consider this solved.

[getdave]

I'm not sure. I understood that the request was for the ability to control the stacking order rather than "always keep the image on top".

[masperber]

@getdave I agree. This is not resolved.

[getdave]

@carolinan Respectfully I'm going to reopen this one. Let's see if someone is open to devising a UI control to allow switching this ordering.

[shoelaced]

Indeed and thanks @getdave. Although my example placed the image on top, I had meant to request a control, as there are plenty of use cases for either.

[Sirjazzfeetz]

3 years, sheesh! Sad that we even need to request.
This is a basic and critical no-code design feature.

[masperber]

@Sirjazzfeetz remember that this is a community project. We're all equally responsible for adding needed features and correcting issues. :)

In that spirit, I've submitted a PR to resolve this.

[sabernhardt]

Trac 59944 has another request for putting the text above media.

In WordPress 6.4, I get a mismatch between visual order and DOM order when the media is on the right and then stacked on top for smaller screens.

For a toggle control, "Reverse on mobile" could be confusing. I think saying specifically "Media appears above text when stacked" (or something similar) would be clearer.

[germanfrelo]

Yes, please, implement this.

[shoelaced]

@sabernhardt I don't disagree that we should avoid confusion but hopefully this option will eventually be available for all of the blocks that display content side-by-side, such as the Columns block. Perhaps "Reverse stack order on mobile" or something would be clearer? I think whatever the language is should be neutral to the potential content (i.e. without mentioning "media"), so it can be consistent across blocks that may also need it.