I recently purchased a plugin to add a table of contents to my Divi website’s blog posts, in order to make reading more convenient for my visitors. However, on mobile devices the table of contents appeared at the bottom of the post on mobile devices, which isn’t very helpful to the readers.
So, I decided to change the order of the columns in my Divi blog post template to fix this issue. In this tutorial, I’ll share with you how I did this and guide you through the process of rearranging Divi columns on mobile devices. With great thanks to Nelson Lee Miller of Pee Aye Creative.
Step 1: Access the Divi Builder
First, log in to your WordPress Dashboard and navigate to the page or post you’d like to edit. Click on “Edit with Divi” to access the Divi Builder. If you are working with a blog post template, navigate to the Divi Theme Builder to edit your template.
Step 2: Locate the Row with Columns you want to rearrange
Once you’re in the Divi Builder, identify the row containing the columns you want to rearrange. Click on the row settings (the gear icon) to access the Row Settings modal.
Step 3: Add CSS to the Advanced tab
Navigate to the Advanced tab -> Custom CSS -> Main Element. Place the following code:
display: flex;
flex-wrap: wrap;
Step 4: Set the columns in the right order
For each column, you need to determine the stacking sequence on mobile. To do this, simply assign an order number, such as “order: 1;”, “order: 2;”, and so on, to the columns. Type or paste these straightforward commands into the Main Element for each respective column.
To this go back to the Content tab of the Row settings and click on the gear icon next to the column you want to give an order number. Order your columns in the right order starting with 1.
Navigate to the Advanced tab -> Custom CSS -> Main Element. Place the following code:
order: 1;
You can order as many columns as you like. In my example there are only 2.
That’s it!
That’s all it takes. Now, I have the table of contents positioned on the right for desktop devices, and at the top of the blog post for mobile devices. It’s precisely the layout I was aiming for.
Table of content plugin
Would you also like to incorporate a table of contents in your blog posts for improved navigation? Click here to read all about it. I highly recommend the tool I purchased for just $15, which has greatly enhanced my website’s user experience. Give it a try and see the difference it makes!
