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
