When using multiple columns with Divi, the design will need to be modified for smaller device sizes due to the manner in which Divi “stacks” the columns.  For example, a typical grid layout would be (live view at www.sharkcagediving.us):
Row 1:  Image in the left column |  Text in the right column
Row 2:  Text in the left column |   Image in the right column
Row 3:   Image in the left column |  Text in the right column
Row 4:  Text in the left column |   Image in the right column

On desktop, the grid layout will display as:
flip columns for mobile
As the screen size becomes smaller, the multi-column layout will reduce to a single column.  The elements will begin to “stack” on top of each other in a single column rather than maintain the side by side relationship.  By default, the elements are read from left to right, from row to row.  If left in it’s default state,  the 3 rows seen above would appear as text/image/image/text/text/image on mobile, rather than the desired stacking of text/image/text/image/text/image. 

To achieve the proper look on mobile, we’re going to flip columns in every other row for smaller screen sizes.  VERY IMPORTANT:  ONLY FLIP EVERY OTHER ROW.

STEP 1:  In your Row Settings (green bar), add the custom class “flip” (without the quotes) in the Custom CSS tab. Repeat this step in EVERY OTHER row. In order to determine which rows to apply the custom class to, view the layout on mobile and determine which row or rows are stacking in the wrong order.
reverse columns for mobile
STEP 2: In your child theme stylesheet (or e-panel custom CSS box if you are not using a child theme), copy and paste the following CSS (credit to Colin Falcon of Simply Design Me for this gem!):

/***Switch column order on mobile***/
@media only screen and ( max-width: 980px ) {
.flip {
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse !important;}
}
/***end switch column on mobile***/

That’s all there is to it!  If for some reason your flip column layout is not working properly, check to make sure that the custom class is assigned to the ROW setting, and also that you’ve ONLY applied it to every other row. Applying the custom class to 2 consecutive rows will merely reverse the original problem rather than correct it.

For more tips on responsive design with Divi, follow our blog or join us on Facebook. :