Divi theme is mobile friendly, and when it comes to making sure that the resultant websites built with Divi become mobile friendly, Divi will collapse the 4-column rows into 1-column on mobile.

This feature may not look as great as you may want, because it tends to make the web page longer for no reason.

In this article, I will show you how to collapse a Divi 4-column row into a two-column layout on mobile devices using the simple CSS snippet below.

First, add “four_to_two” CSS class to the relevant section or row. Then, add the CSS snippet below to your Divi Theme Options.

/* “.four_to_two” make 4 col rows not collapse to one on mobile */

@media (max-width: 479px){
.et_pb_section .et_pb_row_4col.four_to_two>.et_pb_column.et_pb_column_1_4 {
width: 50%!important;
margin-right: 0 !important;
}
.et_pb_section .et_pb_row_4col.four_to_two>.et_pb_column.et_pb_column_1_4:nth-of-type(even) {
width: 50%!important;
margin-right: 0 !important;
}

}

That’s it for now. To be able to receive more of these tips. Subscribe to my newsletter.