Easily Reverse WPBakery Columns on Mobile - The Website Architect

Unfortunately, WPBakery doesn’t come with the option to reverse columns on mobile to make better responsive orders of content. However, by adding some simple CSS you can achieve this effect using CSS’s flexbox.

To get the reverse columns working:

1. Add the swap-on-mobile CSS class to the row you want to have columns swapped.
2. Add the CSS below into your themes CSS (Appearance > Customize > Additional CSS) depending on what kind of WPBakery you are using

Standard version of WPBakery

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

Sailent version of WPBakery

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

You’re welcome, have a nice day.