How to stack columns image-first on your WordPress website

Inside: how to switch the order of your columns for small screens – with a video tutorial

Have you ever made a beautiful page layout for desktop, with text and images alternating left and right, and then it stacked all wrong on mobile?

Well, here's how to fix it. (Please turn on the captions if needed.)

Prefer reading? No problem.

In English, we write and read left to right. So as a general rule, columns in the block editor also stack left to right.

And for the most part, this is fine.

But sometimes, you want something different. Say if you have a grid-like layout with alternating text and images on desktop. You probably want them to keep alternating on mobile as well.

There's a block for that

Yep, I know you're thinking columns but for this kind of layout, I recommend you use the Media & Text block.

It's a core Gutenberg block built into every new WordPress install. That means you have it, unless your developer disabled it.

You can find the block by typing in a forward slash followed by m-e-d.

Screenshot showing how to find the Media & Text block

Select it and add your image and text. You'll notice the default layout is image-left. You can change this setting to put the image on the right. Like this:

Screenshot showing how to switch media & text layout in the block

That was easy, right?

Desktop vs. mobile

You can duplicate the block several times, alternating images on left and right. (Different images and text, I would imagine, but you do you.)

I use four of these blocks to make a pretty layout. It looks great on dekstop.

But it's not so great on mobile. Notice how we have two images together and two blocks of text together?

Desktop and mobile screenshots of the layout

Not at all how it should look on a small screen, but…

A little CSS magic goes a long way

We're going to take advantage of the fact that WordPress puts a CSS class on the blocks where the image is on the right side.

(Too technical? No problem. All it means is that we're going to take advantage of how WordPress works.)

We'll add a bit of code in our Additional CSS. You get there by clicking on Appearance -> Customize -> Additional CSS.

Here's the code you'll need:

/* Make sure media & text blocks always stack image, then text */
@media screen and (max-width: 600px) {
.has-media-on-the-right {
display: flex;
flex-direction: column;
}
}

And here's how the code looks when you paste it in the Customizer. If you already have some code here, leave it as is and paste the new bit at the bottom. Then click the Publish button at the top.

All done and stacked correctly

With the extra bit of code, the images and text stack correctly on small screens. If you're working alongside with me, you can preview the change immediately.

But if you're just reading, thinking about bookmarking this tutorial for later (you totally should), then here's how it will look when it's done.