If your site has columns of content (which I’d be willing to bet that it does), tell me this – what happens to those columns on mobile? I’ve seen 3 answers to this question in the last week alone. Which one applies to you?
- They stack on top of each other …maybe in the wrong order. More on this shortly.
- They stay as columns …which makes the content impossibly small on a phone.
- They disappear. I wish I was kidding. Divi is the biggest offender of this one if a column is empty other than a background image.
Most WordPress themes + builders have a default function to either stack or hide columns as screens reduce in size. And I think it’s the right solution for columned content. When a screen is no longer wide enough for more than one word at a time per column, a different layout needs to happen. Hiding columns to replace them with a graphic of the content can work but isn’t a permanent solution since it excludes screen readers + search engines.
Gutenberg has an option to prevent columns from stacking on mobile thanks to a simple toggle. Use with caution to ensure that your content is readable on smaller iPhones. They are still being used, I promise.
Stopping columns from stacking in the wrong order
More often than not, columns stacking in the wrong order is a visual problem. Alternating columns of images + content are used to keep interest on a page. In one section, the image is placed on the right. In the next section, an image appears on the left. When these 2 sections stack + appear on mobile, it goes text – image – image – text. Not the worst thing that could happen. But you deserve better than that + so do your mobile site visitors.
Re-order WordPress columns on mobile
Here’s where things are going to get a little nerdy, we’re going to reverse the order of some of your columns on mobile.
Before you close this tab, let me explain what needs to happen. You should also know that I’m going to provide you with the code to copy + paste into your site.
Add your custom column class
First, you need to pick which columns should be stacked in reverse order on mobile. This is not limited to 2 column layouts, but that’s the situation this applies to most often. In the example above, I would pick the first one to reverse so that the order goes image – text – image – text. But you might want the image to appear after each text column. It all depends on the purpose of the image.
Then you’ll tell your site how to stack those specific columns in reverse by pasting a few lines of CSS (style code) into your WordPress dashboard. It may require some patience (or an incognito browser window) but you’ll see your changes in action + have a better user experience on your WordPress site. Plus you can use this for any future column layouts that you create. So let’s dive in.
In every builder I’ve used, there is the option to add a class or an ID (anchor) to elements on the page. Here’s what those look like in Gutenberg, Divi + Elementor.
I recommend using CSS class because it is something you can apply to multiple elements on a page. IDs are intended to be used once per page. For the sake of this tutorial, I recommend using reverse-column. Simple, effective, easy to find in a search. Apply that class to any columns you want stacked in reverse order.
Important note: apply the class to the entire row or column block, not an individual column.
Add your class details to your site
If you already have a custom CSS area that you know + use, please paste this code there. If you’ve never done anything like this before, you’re going to head to your WordPress dashboard. Then go to Appearance > Customize. Once that loads, click Additional CSS. Yours may be empty, or it may have content. We are not replacing anything that already exists, so scroll to the very bottom + hit enter or return to start a new line. Then paste this code in place + click Publish.
@media screen and ( max-width: 767px ) {
.reverse-column {
display: flex;
flex-direction: column-reverse;
}
}
The line “display: flex” might not be necessary, but some builders disable flex on small screens to force columns to stack. What we want is for this content to remain as columns but display as reverse-ordered columns at full-width. That’s what flex-direction refers to.
The bit about max-width simply means apply this to any screen that is 767px wide or smaller. That’s a popular size for some themes + builders, but you can change it if you need this to kick in sooner or later based on your designs.
Test the results
Once you’ve completed both steps, check out your content in a private or incognito window on your phone to confirm that it works the way you want it to. Since there are countless combinations of plugins + themes in the world, this isn’t a guarantee, but it has worked for dozens of sites that I’ve worked on. If you get stuck, reach out with a link for me to look at.