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

Elementor has a nice feature of being able to reverse the column order for different device types, 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

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

0 Comments

Submit a Comment

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