Divi Toolbox ➜ Mobile ➜ Change Mobile Column Count
The Divi Toolbox adds an option to use custom CSS classes to change the number of columns for Tablets and Phones.
How to use it:
Add one (or two) of these classes to Row Settings:
tablet-two-cols – to display two columns on tablets (screen width 479-980px)
tablet-three-cols – to display three columns on tablets
tablet-four-cols – to display four columns on tablets
tablet-five-cols – to display five columns on tablets
tablet-six-cols – to display six columns on tablets
phone-two-cols – to display two columns on phones (screen width below 479px)
phone-three-cols – to display three columns on phones
phone-four-cols – to display four columns on phones
Change Mobile Column Count ➜ Custom Columns Mobile Breakpoints
Define the screen width, below which the custom column structure changes from Desktop to Tablet and from Tablet to Phone.
Change Mobile Column Count ➜ Use Mixed Column Widths
Enable additional CSS classes for different column widths, eg. one-third and two-thirds:
tablet-2cols-1-2 – two columns, one-third and two-thirds wide, on tablets
tablet-2cols-2-1 – two columns, two-thirds and one-third wide, on tablets
tablet-2cols-1-3 – two columns, one-fourth and three-fourths wide, on tablets
tablet-2cols-3-1 – two columns, three-fourths and one-fourth wide, on tablets
phone-2cols-1-2 – two columns, one-third and two-thirds wide, on phones
phone-2cols-2-1 – two columns, two-thirds and one-third wide, on phones
phone-2cols-1-3 – two columns, one-fourth and three-fourths wide, on phones
phone-2cols-3-1 – two columns, three-fourths and one-fourth wide, on phones
