WordPress

Swap WPBakery Columns on Mobile in 6 Lines

The Problem

“Ugh, WPBakery is such a pain! It’s so frustrating that it doesn’t offer a way to reverse columns on mobile for a more responsive content layout. I don’t have time to waste on workarounds – why can’t things just work the way they’re supposed to?”

We hear you. Unfortunately, fully realizing a solid responsive experience with WPBakery is gonna involve workarounds.

It is what it is.

This workaround, however, is pretty simple. We just need to add a couple lines of CSS to the row we want to reverse the columns of.

Why It’s Important

Here’s our UX spiel. Feel free to skip right ahead to The Solution.

Reversing columns in a responsive layout for mobile devices can be useful for a few reasons. For example, if a layout has two columns and the left column contains content while the right column contains a table of contents, on a mobile device, it’s more natural to display the TOC first followed by the navigation links.

Here’s another example. Say you have a layout like the one below, with alternating rows of images and copy, a common design pattern.

An example of WPBakery reversing columns on mobile
The right column containing the image needs to appear above the text to avoid bunching downstream

For mobile devices you’ll want to swap the order of the columns on the second row to show the image first. This way images don’t bunch up and get decoupled from the copy it helps to illustrate.

The Solution

To swap WPBakery columns on mobile, add a class to row that contains the columns you want to swap, like so:

Then add these six lines to your global CSS.

@media only screen and (max-width: 769px) {
	.swap-cols-on-mobile {
		display: flex !important;
		flex-direction: column-reverse;
	}
}

You may need to target an additional class that is contained by the row. With our theme, we targeted a theme-specific class called “eltdf-responsive-mode-768” that is dynamically generated and applied to smaller screen sizes. Adjust accordingly.

@media only screen and (max-width: 769px) {
	.swap-cols-on-mobile .eltdf-responsive-mode-768 {
		display: flex !important;
		flex-direction: column-reverse;
	}
}
It worked!

How It Works

By default, an HTML container element acts as a block-level element and follows the normal block layout rules, which means that child elements will stack vertically unless specified otherwise. However, by setting the display property to flex, you can turn a container into a flex container that can lay out its child elements in a flexible and responsive way.

So that’s why we set display to flex. Setting flex-direction to column-reverse should be self-evident, but here are more details on the specification.

The CSS property flex-direction determines the main axis along which the flex items are laid out within a flex container. It specifies the direction in which flex items are placed and the direction in which they flow.

The flex-direction property can take one of four possible values:

  • row: This is the default value. Flex items are laid out along the horizontal axis from left to right.
  • column: Flex items are laid out along the vertical axis from top to bottom.
  • row-reverse: Flex items are laid out along the horizontal axis from right to left.
  • column-reverse: Flex items are laid out along the vertical axis from bottom to top.

So What Have We Learned, Class?

We learned that while WPBakery is not the most intuitive page builder when it comes to responsive UX, but we can easily reverse the order of columns with a little CSS.

And what else did we learn?

“By considering the user’s needs and the constraints of mobile devices, designers and developers can create responsive layouts that provide a better overall user experience.”

Thank you. Class dismissed.

Leave a Reply