Skip to content

Instantly share code, notes, and snippets.

@MariaJackson1
Last active August 8, 2022 20:43
Show Gist options
  • Select an option

  • Save MariaJackson1/90c1bfcb569bf28e776b99023af196e2 to your computer and use it in GitHub Desktop.

Select an option

Save MariaJackson1/90c1bfcb569bf28e776b99023af196e2 to your computer and use it in GitHub Desktop.
Swap Columns
https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment