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

Block editor

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
media and text block default

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
media and text block default on mobile

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 .

media and text block default on mobile before css
media and text block default on mobile after css

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

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

About The Author

1 thought on “How to change the mobile display order of the media and text block”

  1. I was trying this similar code since yesterday copied from github and was not able to produce result. Finally get it right by making sure that on your Gutenberg block one need to select show media on left even though on desktop you want it on right side. Paste the css code has-media-on-the-right on the row where you want to make image right on desktop.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Skip to content