How to Reorder Stacking Multiple Columns in Elementor – with Order Control (Not Reverse Columns)

Elementor has a nice feature of being able to reverse the column stacking order for different device types, by clicking Advanced -> Reverse Columns. But what if you want more control over the order such as reversing just 2 columns of a 3 column layout? Elementor core doesn’t not offer this option.

There are work arounds such as creating 2 columns and placing a 2 column inner section in column 2. You can reverse column 2 and 3 by reversing the inner section. But what if you then change your mind and want to swap column 1 and 2? Or column 1 and 3? You would have to restructure the section. Not an ideal solution.

Another way to do this is to use CSS. CSS code can definitely achieve this, but it is not the most efficient solution, because if you doing this a lot across the site, you will end up with too much css code and it will be more time consuming.

The ideal solution is to add a function, to allow the column ordering functionality. This is an easy fully flexible solution (similar to flexbox) where you assign a number to each column for each device type to assign its new position.

There are 2 ways to add the function. One way is to use the Code Snippets plugin (this is my preferred way). The other way is to add it to the functions php file.

Here is the php code to add

function bleye_add_responsive_column_order( $element, $args ) {
	$element->add_responsive_control(
		'responsive_column_order',
		[
			'label' => __( 'Responsive Column Order', 'bleye-elementor-extras' ),
			'type' => \Elementor\Controls_Manager::NUMBER,
			'separator' => 'before',
			'selectors' => [
				'{{WRAPPER}}' => '-webkit-order: {{VALUE}}; -ms-flex-order: {{VALUE}}; order: {{VALUE}};',
			],
		]
	);
}
add_action( 'elementor/element/column/layout/before_section_end', 'bleye_add_responsive_column_order', 10, 2 );

And then the column settings will show this new field:

From there, for each device type, you can enter the number for each column to assign its new position.

For example if you have 3 columns and you want to swap column 2 and 3:

  • In Column 1: Responsive Column Order field you will enter 1
  • In Column 2: Responsive Column Order field you will enter 3
  • In Column 3: Responsive Column Order field you will enter 2

The other advantage of this, is you can reorder in any combination any number of columns. For example you can reorder 4 columns or 5 columns in any order very easily with just a few clicks.

2023 UPDATE: Now that the new feature of the container (which can replace sections and columns) is available on the latest version on Elementor, the above is actually not necessary. It is a built in feature of the container (it is a property of flexbox), by assigning the order number to “custom order” for each element in the container.

Feel free leave a comment below on your thoughts on this and if it worked for you.

4 Comments

  1. MecMick

    …super cool. Thank you.

    Reply
    • Mastery Websites

      Great, I am glad this was useful for you.

      Reply
  2. Lonnie

    I installed Code Snippets, chose PHP, pasted in the code, saved at bottom of page, no joy. I have tried this twice and it still doesn’t work. I even repasted the code and double-checked everything. 🙁

    Does this not work with the free version of Elementor?

    Reply
    • Mastery Websites

      Hi Lonnie, I just tested this on the free version of Elementor and it works fine. Make sure the snippet is active (the toggle should be enabled). The new field will show when you click on Column, under Layouts.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *