column – XTRA Tutorials

How to Reverse Columns on Mobile Using Elementor: Step-by-Step Guide

XTRA — Sun, 08 Sep 2024 08:24:40 +0000

Description and Screenshot

Step 1

XTRA

Reversing columns in Elementor on mobile devices

In the latest versions of Elementor, with the introduction of Flexbox and Container, managing column order on mobile has become much easier and more flexible. In this tutorial, we have explained how to reverse columns for mobile display.

Edit the desired page using the “Edit with Elementor” option.

Use the Navigator to select the section containing the column.
Switch the editor mode to mobile from the black toolbar at the top of the page.
Go to the Layout tab > Items > Set the “Column-reversed”.

How to Reverse WPBakery Columns on Mobile Devices?

XTRA — Tue, 04 Jun 2024 14:56:44 +0000

Responsive

Step 1

Step01

WPBakery

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:

Add the reverse-col-on-mobile CSS class to the row you want to have columns reversed
Add the CSS below into your themes additional CSS on Theme Options > Additional CSS

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