How to change the column stacking order using flexbox using the Divi Theme?

Changing the column stacking order on tablet and below is super easy using flexbox. Here’s how:

For the purpose of this demo, we are going to use a 2-column row, but the same result can be achieved using any number of columns.

Add the following class to the row holding the columns in question via Row Settings > Advanced > CSS ID & Classes > CSS Class field:

stack-row

Add the following class to the first column in question (which will be stacked second on smaller viewport widths!) via Row Settings > Column Settings > Advanced > CSS ID & Classes > CSS Class field:

stack-col-two

Add the following class to the second column in question (which will be stacked first on smaller viewport widths!) via Row Settings > Column Settings > Advanced > CSS ID & Classes > CSS Class field:

stack-col-one

Save the page and go to a place where you can write and save some CSS code. This can be your Theme Editor file, Theme Customizer (probably the easiest — Dashboard > Divi > Theme Customizer), a code module, or even your page setting’s CSS section.

Copy and paste the following code:

@media all and (max-width: 980px) {
.stack-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; 
flex-wrap: wrap;
}
.stack-col-one {
-webkit-order: 1;
order: 1;
}
.stack-col-two {
-webkit-order: 2;
order: 2;
}
}

Save the code and you are done!

For more WordPress tips, tricks, and tutorials visit my site.