Divi Theme: Adjust Column Stacking Order on Mobile Devices

To sum it up:
Paste this code in the style.css stylesheet:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;

.second-on-mobile {
-webkit-order: 2;
order: 2;

.third-on-mobile {
-webkit-order: 3;
order: 3;

.fourth-on-mobile {
-webkit-order: 4;
order: 4;

/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;


Put the class custom_row as the row class and then first-on-mobile, second-on-mobile, etc as the appropriate column class:

Referencing this article:

How To Adjust Divi’s Column Stacking Order on Mobile Devices

Need help?

Tell us about your project!

  • Date Format: MM slash DD slash YYYY
  • This field is for validation purposes and should be left unchanged.

Related articles

Google Rating
Based on 58 reviews