Reversing Mobile Column Collapsing Order (Divi)

To reverse the collapsing order on mobile devices, so that the default behaviour goes from left-column collapsing ABOVE the right-column, to the opposite… you’ll just need to add a CSS class to the row, and then use the css property of flex-direction: column-reverse.

1) Add the CSS class to your ROW: reverse-columns-mobile.

2) Add the following CSS to your stylesheet:

@media (max-width: 980px) {
  .reverse-columns-mobile {
    display: flex;
    flex-direction: column-reverse;
  }
}

An additional tip is to watch the padding underneath the content in the collapsing columns. Divi adds a default 30px bottom margin to columns on mobile, except the last one. If you don’t pay attention to this the two column’s content may appear crammed together.