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.

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

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

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

…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.

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

 

Storage Shelves Photo by Samuel Zeller on Unsplash