Changing the order that Divi column’s stack on mobile.

Changing the order that Divi column’s stack on mobile.

The Divi Page Builder is my favourite tool for quickly building web pages. The modules, columns, rows, and sections all have a smorgasbord of settings that make it easy to change almost any aspect of the set-up. One thing that’s missing from those options (at least for now) is the ability to change the way that columns stack on mobile devices. By default everything that sits on the right moves down.

I for one, was keen to change that as sometimes that’s not ideal. For example, if I have two columns with the text on the right and an image on the left, that’s great on desktop, but then I lose the text underneath the image on mobile.

This post concentrates on sections with two columns but there’s no reason the concept couldn’t be carried over to all of the various page layouts. Let me just say now that:

 

I have absolutely no intention of trying to change the way that columns stack!

I looked at it and just thinking about it made me go cross-eyed, so instead I’m going to cheat. But the results are the same so that’s all that matters, right?

So here’s what we know; when the columns stack, the right side goes down and the left side stays put, so the easiest way to achieve the required result is to swap the columns round on desktop, so then it looks like our left column is on the right and our right column is on the left. If that’s confusing, take a look at these images.

builder
  • Facebook

So looking at our builder, we can see that the text is on the left and the picture is on the right, so on mobile devices, our text would stay above the image…

front
  • Facebook

But on the front end of the website, the text appears to be on the right, so when we move onto smaller screens it will appear that our left column is moving under the right column. It isn’t. It’s just CSS voodoo πŸ˜‰

magic
  • Facebook

You see? Magic!

So here’s what we need to do for that to work

1. By default, the margin that keeps our columns separate is applied to the first column on the right, that’s pretty standard for items that are floated to the left. But to change the order we need to float the columns right, so we need to also change the spacing to being applied to the left.

2. By default, the column on the right doesn’t have any margins set as it would usually sit against the right edge of the page, but now it sits on the left so we need to give it a margin right. We can make sure the changes are only applied to the last column using a pseudo element ‘:last-child’.

To make sure this only effects the areas we want it to, I’ve added a section class of ‘column-swap’. Here’s what the CSS looks like:

@media only screen and (min-width: 981px) {
 .column-swap .et_pb_column, .et_pb_row .et_pb_column { 
 margin-left: 4.5%;
 }
 .column-swap .et_pb_column { 
 float: right;
 }
 .column-swap .et_pb_row .et_pb_column:last-child, .column-swap .et_pb_row_inner .et_pb_column:last-child { 
 margin-right: 4.5%; 
 margin-left: 0; 
 width: 47.25%;
 }
 .column-swap .et_pb_column, .column-swap .et_pb_row .et_pb_column:first-child { 
 margin-right: 0; 
 width: 47.25%;
 }
}

Now, that’s the fun bit. But how do you make it work for you?

How to implement the column swap

  1. Make sure you’re only trying this on sections with two columns.
  2. Add a class of ‘column-swap’ to your section.
  3. Add the CSS above to your child theme or ePanel.
  4. Make sure your columns are the wrong way round in your page builder as the code is going to flip them (ie. if you want the text on the right, put it in the left column).
  5. That’s it!

If you use the code, let us know in the comments πŸ™‚

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.