Changing the column order on Elementor for mobile devices

column order on Elementor
An issue that could be presented with that is when you have a section with three or more columns and you want the elements within those columns to be ordered in a different manner on mobile than on desktop.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

One of the principles in web design that has become increasingly more important is responsiveness. That means, creating your designs so that they work well on mobile whilst maintaining the aesthetical features on the smaller screens. And what I’m going to write about in this article is all about that, because the way Elementor works when you adjust your design to mobile is by giving columns (you know, the container inside the sections) a width of 100%. This is done automatically so as to not have design where an image is on the left but really small and text is on the right but displayed in a really long way.

 

An issue that could be presented with that is when you have a section with three or more columns and you want the elements within those columns to be ordered in a different manner on mobile than on desktop. With design builds done usually first on desktop (though there are practices that dictate it is best to start on mobile), the column order on Elementor is from left to right, so that when you go to mobile, the order will be from top to bottom with the column that was most on the left on desktop being the top one on mobile, and the one that was most on the right being the one on the bottom.

 

Doesn’t Elementor have a fix for this issue?

Well, yes and no. Because the column order on Elementor can be taken care of by going to the section’s advanced tab, clicking responsive, and then switching where it says “Reverse Columns (tablet)”, “Reverse Columns (mobile)” to yes. Now, the problem with this approach is that it only works well when the section has two columns, because if it has three or more, it will take the one that’s one on the top and switch its order with the one that’s on the bottom.

 

 

 

Recommended reading: 3 Simple Ways To Add Header And Footer Scripts To Your WordPress Site

 

So, what do we do?

Well, luckily, there is a solution and as other articles in this website, it involves a little bit of coding. But as I always, you do not need to worry, because the code that you need to use will be available below for you to only copy and paste.

 

The first thing you need to do is install the Code Snippets plugin. Now, I’ve never really recommended this plugin before because the tutorials in this website that involve coding are usually from CSS, which can be added in Elementor using the site settings tab (a post coming for that in the future), or in the Customizer if you’re using a child theme, which you should. You can check here how to create a child theme. However, for this tutorial, we will be working with PHP code which – to be honest – can be added in the functions.php file of your child theme but with the Code Snippets, everything becomes more manageable.

 

Now, once the plugin is installed in your site, you’re going to see a tab below plugins called “Snippets”. There, you will click “Add New”

 

elementor column order

 

 

There, you’re going to want to give a name to your snippet (this case could be something like Custom Column Order Elementor). Luckily, it doesn’t have to be something you will need to remember because by viewing “All Snippets” you can see which ones you’ve added. In code editor of the snippet you’re adding, paste the PHP code below:

 

 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 );

 

Now, once you enter an Elementor page, post or template you will see the following option when you click to edit a column:

 

column order on Elementor

 

That’s it! I understand this is a short one, but this is a simple tutorial that has been really helpful for me in many occassions, and I thought I’d share with you. All you have to do then is adjust the number for the particular columns in the way you want them ordered.

 

Hopefully this has been helpful for you as well and that changing the column order on Elementor is not so much of a hassle to you now!

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

Previous and next POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • Blog
  • Project Application
  • Agency Plans
Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!
Are you looking to build a new website for your business? One that will stand out amongst the competition? Click the button and start your project now!
Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want