How to change the mobile display order of the media and text block

I will never get tired of saying that the media and text block is the most versatile and practical of all those offered by the WordPress editor.

Its great value is that in a single screenshot we offer at the same time visual and text information about the element we want to highlight.

In fact, the combination of media blocks and inverse text, one after the other, with more or less design, is one of the most used design elements in the main websites.

In other words…

1. Media and text block with the image on the left and text on the right
2. Media and text block with text on the left and image on the right
3. … and so on

But not all is good news…

It turns out that the media and text block, by its own natural order, when we insert inverse media and text blocks in this way, when viewing them on mobile devices the image and text do not alternate, but the structure is:

• Image
• Text
• Text
• Image

Instead of keeping the one we had of: Image>Text>Image>Text

Fortunately, we can solve this problem with a little CSS code, which will alter the order of the columns in the media and text blocks, when displayed on mobile devices.

The code simply has to be added in the WordPress customizer, in the additional CSS section, and this is it:

/* Media & text blocks */
@media (max-width:600px) {
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
grid-column:1 !important;
grid-row:2 !important;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
grid-column:1 !important;
grid-row:1 !important;
}
}Code language: CSS (css)

When you publish the changes the media and text blocks will be seen in the same order as when they are displayed on the computer or tablet .

With this CSS code you can now add as many media and text blocks as you want and they will always have the alternate order, also on mobile devices.

Read this post in Spanish: Cómo cambiar el orden de visualización en móvil del bloque de medios y texto