Divi Tutorial – Reorder Mobile Stacking

Divi Tutorial – Reorder Mobile Stacking

Here’s a simple method you can use to reorder mobile stacking.

The main problem with using page builders and its settings is that you’re stuck with what the developer allows you to do.

Divi in this case, is quite limited in its responsiveness, which is why I made a whole course on how to make it more responsive.
Plug: The course covers a lot, check out the sample course to make your decision.

[sc name=”responsive-ad”]

OK, on to reordering mobile stacking.

Objective

Normally, when we have a layout like this:

On mobile,

 

We get a mobile stacking view like this, which isn’t ideal.

So we’re going to make it look like this, which is much better.

 

and that’s what we’re going to do.

The video

 

The build

Not much to the build, as long as it’s a couple of columns you want to swap order on mobile, it’ll be fine. Here’s what I’m working with in the video. (Everything is default settings and the modules don’t really matter since we’re swapping the columns.)

 

Add ‘reverse-on-mobile’ in the row’s custom class.

 

The code

And add this CSS.

@media all and (max-width: 480px) {
  .et_pb_row.reverse-on-mobile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

Feel free to change the 480 to something else if you want to make the reverse stack work on different screen widths. (For example, 980px is Divi’s breakpoint for most things mobile.)

[sc name=”customcss”]

 

…and you’re done. Really simple, hey.

However..

Extra Note

Because the last column in a row has 0 margin on the bottom, and the others have 30px by default, when we switch the order, the image is stuck with no margin on the bottom. You can of course set the margin on mobile in the builder, but if you want to get the CSS out of the way without bothering yourself about it in the module settings, then add the two extra classes in the columns’ custom classes.

and add this CSS instead of the one above.

@media all and (max-width: 480px) {
  .et_pb_row.reverse-on-mobile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .et_pb_row.reverse-on-mobile .et_pb_column.text-col {
    margin-bottom: 0;
  }
  .et_pb_row.reverse-on-mobile .et_pb_column.image-col {
    margin-bottom: 30px; /* change this as you see fit */
  }
}

 

Please note: The reason why I add extra classes, and not use :first-child, :last-child is because in my courses I explain a lot more stuff on how to make more complex stacking orders and stuff, and it’s always good to label the columns (or modules) so you can edit them easily without fighting default CSS.

If you want to learn more about CSS, check out the course I have here.

[sc name=”learn css”]

[sc name=”join dot net”]

 

Storage Shelves Photo by Samuel Zeller on Unsplash

Leave a Reply

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

    New tutorials

    Why no ads?

    Hi, I'm PK, and I maintain and publish content on this site for two reasons.

    1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

    2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

    The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

    Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

    There's a newsletter!

    Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.