Source: https://divilover.com/css-tips-to-enhance-divi-mobile-experience/

2 column rows

If you have a 2 column layout with 2 rows

• 1st row with image left, text right
• 2nd row with text left, image right

Then on mobile, the columns are stacked like this

• Image, text, text, image

To reverse, flip, swap or switch the stacking on mobile for the second row, add the following custom css and the class hws-flip-columns-mobile to the CSS class in the row settings.

/* -- START Flip column stacking order on mobile -- */
@media (max-width:980px) {
.hws-flip-columns-mobile {
display: flex;
flex-direction: column-reverse !important;
gap: 30px;
}
}
/* -- END Flip column stacking order on mobile -- */
Code language: CSS (css)

The gap adds extra margin between the rows/columns on mobile. An alternative would be:

.hws-flip-columns-mobile .et-last-child {
margin-bottom: 30px !important;
}
Code language: CSS (css)

3 or more columns

Source: https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices

Add the below custom CSS and in the row settings » advanced custom CSS:

• Row 1 / uneven rows
  • CSS Class: hws-flip-4-column-row
  • Column 1 CSS Class: c1_tablet
  • Column 2 CSS Class: c2_tablet
  • Column 3 CSS Class: c2_tablet
  • Column 4 CSS Class: c1_tablet
• Row 2 / even rows
  • CSS Class: hws-flip-4-column-row
  • Column 1 CSS Class: c2_tablet c2_phone
  • Column 2 CSS Class: c1_tablet c1_phone
  • Column 3 CSS Class: c1_tablet c4_phone
  • Column 4 CSS Class: c2_tablet c3_phone

/*** START 4 column row stacking order on mobile ***/
@media all and (max-width: 980px) {
/* wrap row in a flex box */
.hws-flip-4-column-row  {
  display: flex;
  flex-wrap: wrap;
}
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
/* custom classes to designate column order in the flex box row */
.c1_tablet {
order: 1;
}
.c2_tablet {
order: 2;
}
}
@media all and (max-width: 767px) {
/* custom classes to designate column order in the flex box row */
.c1_phone {
order: 1;
}
.c2_phone {
order: 2;
}
.c3_phone {
order: 3;
}
.c4_phone {
order: 4;
}
/* add margin to last column */
.hws-flip-4-column-row:last-child .et_pb_column:last-child {
margin-bottom: 0;
}
}
/*** END  4 column row stacking order on mobile ***/
Code language: CSS (css)