The Columns Block is a fundamental feature of the WordPress Block Editor. It allows you to create layouts with multiple columns, and even stack them on mobile devices. However, currently, it isn’t possible to change the order of stacked columns on mobile within the WordPress Block Editor. This means that the columns retain their existing order. Often, you may want to reverse columns to display the content of the “right-hand” column before the left-hand column when stacked for display on a mobile screen.
Luckily, there’s an easy CSS fix for this issue. The Columns block is a flexbox container, which means you can change the order of the items inside it by creating a custom class using the flex-direction property. To make sure this change only applies to mobile devices, you should put the class inside a media query that corresponds with your site or theme’s mobile breakpoint.
Nick Diego provided a nice example of this in a recent post on Designing with Column Blocks. He picked the default mobile breakpoint for the media query.
@media (max-width: 782px) {
.mobile-reverse-column-direction {
flex-direction: column-reverse;
}
}Once this custom class is defined, you just need to apply it to any Columns Blocks in the Advanced section. The column order will be reversed on a mobile device.
Our recommendation is to use native block settings whenever possible. However, there may be instances where custom CSS is required. One advantage of utilizing single-purpose classes like this is that transitioning to a native capability in the future will be seamless. We hope you found this helpful tip beneficial.
See something of interest?
Get in touch with us today and let’s talk about how we can help your business.