Table of Contents
In this article you will learn how to easily switch column positions vertically in an Elementor section in a mobile responsive view.
We will be adding this setting to your Elementor Columns where the order can be set for each one of them.
Code credit to this thread.
Install Code Snippet plugin for the Elementor mobile column order code
If you prefer to not install any plugin, you can add the code to your theme's functions.php as well.
Here is why I recommend Code Snippet plugin instead.
Create a new Snippet, add this code, and active it
Go to the snippets option in the WordPress admin console and click on Add New.
Give your snippet some name and paste the PHP code into the contents body and then click on Activate to activate the snippet.
Snippet Code:
function add_responsive_column_order( $element, $args ) {
$element->add_responsive_control(
'responsive_column_order',
[
'label' => __( 'Responsive Column Order', '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', 'add_responsive_column_order', 10, 3 );
Adjust your responsive Elementor column order on mobile to your liking
You will now see "Responsive Column Order"in your column settings. Change the value for each column, to arrange them as you need!
Enjoy your new column order options!
Now you know how to easily adjust column orders in Elementor.
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
9 Responses
Can I add this to the functions.php file? and don't use the plugin?
Yes, that will work as well! I think it's a better idea to use Code Snippets plugin though. It's easier to keep your snippets organized and to know what's going on, it stays on theme change, and it doesn't bloat the website at all. Recommended!
Many thanks Maxime for this really useful hack - Happy New Year!
Thanks Robert! Happy new year!
I using this again, this need to be part of Elementor core
It will be very soon, with the new containers elements!
After I updated to the latest version of Elementor 3.7, it not working!
when on the edit page, it seems ok; but back to front end, the order not same as in preview.
I changed the number again, the erro was repaired.
Thank you! Verry helpful