Reverse Columns on Mobile WordPress – A small fix for a big irritation.
I’ve built plenty Gutenberg WordPress websites over the last few years, and one thing that’s always bugged me is how the Columns block handles stacking on mobile.
Don’t get me wrong the built-in “Stack on mobile” toggle is great. It’s clean and predictable. But there’s one missing piece that’s driven me mad. You can’t control the order of the stacked columns.
If you’ve ever placed an image beside some text, you’ll know what I mean. On desktop, everything looks perfect, text left, image right. Then you shrink it down to mobile, and suddenly that image sits below the text, completely flipping the visual flow.
You could write some CSS, sure. But that’s not exactly friendly for clients, editors, or anyone who just wants things to work.
So… I fixed it.
Introducing Bamboo – Reverse Columns on Mobile
It’s a tiny plugin I built to add one missing feature:
a “Reverse order on mobile” toggle directly beneath the existing “Stack on mobile” option in the block editor.
When you switch it on, your columns flip order automatically when they stack.
No extra CSS. No weird workarounds. Just a simple control that feels like it’s part of WordPress itself.
How it Works
There’s nothing fancy going on behind the scenes. It just adds a single CSS rule:
@media (max-width: 781px) {
.wp-block-columns.is-reversed-on-mobile {
flex-direction: column-reverse !important;
}
}That’s the same breakpoint WordPress already uses for stacking, so it fits right in.
When the toggle is active, your Columns block gets a new class .is-reversed-on-mobile and that’s all it needs.
Lightweight. Predictable. Reliable.
Why I Made It
Honestly, this plugin came out of mild frustration. I found myself writing the same CSS snippet again and again across client projects. Eventually, I thought — why not just make it part of WordPress?
I like small, useful tools. Things that don’t add noise, just quietly make life easier for designers and developers.
That’s exactly what this plugin is.
A neat little detail that saves time, makes the editor more flexible, and feels like it should have been there all along.
How to Use It
- Install and activate the plugin.
- Add a Columns block in the Block Editor.
- Turn on Stack on mobile.
- You’ll see a new toggle ‘Reverse order on mobile’ just below it.
That’s it.
Shrink your browser window, and you’ll see the columns swap places. Done.
Final Thoughts
Sometimes the smallest tools make the biggest difference. This one’s for anyone who likes clean code, tidy workflows, and a smoother editing experience.
It’s not a huge, complex plugin it’s just something that works. And honestly, that’s what good design should do.
If you want to try it out, you can download it directly from Bamboo Manchester.
It’s free, open source, and built because… well, I was tired of rewriting the same fix for the hundredth time.
Written by
Simon Nolan
Creative Designer & Developer
Hi, I’m Simon, and I run Bamboo Manchester. After more than 25 years working in web design and development, I still get the same buzz from bringing an idea to life on screen. Whether it’s crafting strong visual identities, improving SEO, or building completely bespoke WordPress sites, I care about making things that work beautifully and perform brilliantly.