How To Change The Number Of Columns On Mobile In Divi (With Global Presets)

Finally! Here’s a solid and easy way to change the number of columns on mobile and tablet in Divi. By adding some custom CSS you’ll get full control over how many columns to display on mobile and tablet in each Divi row.

Unlock 2-6 columns on mobile and tablet with nice spacing between and beneath the columns. This is a more robust solution then some quick & dirty fixes, for example display:flex or width:50%,that are shared in various Facebook groups and blogs. We’ll stay consistent by using the same type of code that Divi already uses for desktop columns, and apply it for smaller screens too.

In the end of the article, I’ll show how you can save time by using the the Divi Global Presets to change the number of columns on mobile and tablet – without having to add custom CSS classes to your rows.

Before (1 column)

Divi displays one column on mobile by default

After (2-6 columns)

Display multiple columns in the same row on mobile in Divi

1. Add CSS to enable multiple columns on mobile and tablet in Divi

The first step to change the number of columns in Divi for mobile and tablet is to add some custom CSS.

  1. Log in to your WordPress dashboard
  2. Go to Divi » Theme Customizer » Additional CSS
  3. Copy and paste the CSS below:

Pro tip: Copy the entire CSS snippet to access all the additional column options for mobile and tablet. If you only need one specific option, for example 2 columns on mobile, you only need to copy that specific part of the snippet (row 3-21 below).

/*** Change Mobile Columns By DiviMundo.com ***/

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
	.two-col-mob .et_pb_column {
		width:47.25% !important;
	}
	
.two-col-mob .et_pb_column:nth-last-child(-n+2) {
		margin-bottom:0;
	}

	.two-col-mob .et_pb_column:not(:nth-child(2n)) {
			margin-right:5.5% !important;
	}
}

/* 3 Columns Mobile */
@media all and (max-width: 767px) {
	.three-col-mob .et_pb_column {
		width:29.6667% !important;
	}

	.three-col-mob .et_pb_column:nth-last-child(-n+3) {
		margin-bottom:0;
	}

	.three-col-mob .et_pb_column:not(:nth-child(3n)) {
		margin-right:5.5% !important;
	}
}

/* 4 Columns Mobile */
@media all and (max-width: 767px) {
	.four-col-mob .et_pb_column {
		width:20.875% !important;
	}

.four-col-mob .et_pb_column:nth-last-child(-n+4) {
		margin-bottom:0;
	}

	.four-col-mob .et_pb_column:not(:nth-child(4n)) {
		margin-right:5.5% !important;
	}
}

/* 5 Columns Mobile */
@media all and (max-width: 767px) {
	.five-col-mob .et_pb_column {
		width:15.6% !important;
	}

	.five-col-mob .et_pb_column:nth-last-child(-n+5) {
		margin-bottom:0;
	}

	.five-col-mob .et_pb_column:not(:nth-child(5n)) {
		margin-right:5.5% !important;
	}
}

/* 6 Columns Mobile */
@media all and (max-width: 767px) {
	.six-col-mob .et_pb_column {
		width:12.083% !important;
	}

	.six-col-mob .et_pb_column:nth-last-child(-n+6) {
		margin-bottom:0;
	}

	.six-col-mob .et_pb_column:not(:nth-child(6n)) {
		margin-right:5.5% !important;
	}
}

/*** Change Tablet Columns By DiviMundo.com ***/

/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.one-col-tab .et_pb_column {
		margin-right:0 !important;
		width:100% !important;
	}
	
		.one-col-tab .et_pb_column:not(:last-child) {
		margin-bottom:30px !important;
	}
}

/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.two-col-tab .et_pb_column {
		width:47.25% !important;
	}

.two-col-tab .et_pb_column:nth-last-child(-n+2) {
		margin-bottom:0;
	}

	.two-col-tab .et_pb_column:not(:nth-child(2n)) {
		margin-right:5.5% !important;
	}
}

/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.three-col-tab .et_pb_column {
		width:29.6667% !important;
	}

.three-col-tab .et_pb_column:nth-last-child(-n+3) {
		margin-bottom:0;
	}

	.three-col-tab .et_pb_column:not(:nth-child(3n)) {
		margin-right:5.5% !important;
	}
}

/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.four-col-tab .et_pb_column {
		width:20.875% !important;
	}

.four-col-tab .et_pb_column:nth-last-child(-n+4) {
		margin-bottom:0;
	}

	.four-col-tab .et_pb_column:not(:nth-child(4n)) {
		margin-right:5.5% !important;
	}
}

/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.five-col-tab .et_pb_column {
		width:15.6% !important;
	}

.five-col-mob .et_pb_column:nth-last-child(-n+5) {
		margin-bottom:0;
	}
	
	.five-col-tab .et_pb_column:not(:nth-child(5n)) {
		margin-right:5.5% !important;
	}
}

/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.six-col-tab .et_pb_column {
		width:12.083% !important;
	}

	.six-col-tab .et_pb_column:nth-last-child(-n+6) {
		margin-bottom:0;
	}

	.six-col-tab .et_pb_column:not(:nth-child(6n)) {
		margin-right:5.5% !important;
	}
}

Available mobile columns options:

  • 1 column on mobile

    If you don’t change anything, the Divi row will display only one column on mobile.

  • 2 columns on mobile
  • 3 columns on mobile
  • 4 columns on mobile
  • 5 columns on mobile
  • 6 columns on mobile

Available tablet columns options

  • 1 column on tablet

    This is useful if you want to prevent Divi from displaying for example three columns on tablet when displaying six columns on desktop.

  • 2 columns on tablet
  • 3 columns on tablet
  • 4 columns on tablet
  • 5 columns on tablet
  • 6 columns on tablet

2. Add CSS Classes to your Divi Rows to change the number of columns on mobile and tablet

To apply the new column count for mobile and tablet you need to add the matching CSS class(es) to your Divi row. That will actually take less time than reading this paragraph of text.

  1. Enable the Divi Visual Builder on the page that you want to edit
  2. Edit the row (that’s the box with the green border) by clicking the cogwheel
  3. Go to Advanced » CSS ID & Classes » CSS Class
  4. Add one or two CSS classes, matching the number of columns that you want to use, from the table below.

Please notice: Sometimes, the Divi Visual Builder does not display the new column structure the correct way in backend. Save and preview in frontend to see the final result.

Number of columns

Mobile CSS class

Tablet CSS class

One

[no class needed]

one-col-tab

Two

two-col-mob

two-col-tab

Three

three-col-mob

three-col-tab

Four

four-col-mob

four-col-tab

Five

five-col-mob

five-col-tab

Six

six-col-mob

six-col-tab

The table above is actually a live example of this code using the classes “three-col-mob three-col-tab” to display three columns on tablet and three columns on mobile (the same as on desktop).

Examples of how to apply the CSS classes on your Divi rows

Just separate the mobile class and the tablet class with a simple space, for example: two-col-mob four-col-tab

Here are four examples of how you can apply the CSS classes to change the numbers of columns on mobile and tablet in your Divi rows. Just leave the CSS Class field empty if you want to use the default number of columns.

2 columns on mobile and 4 columns on tablet

2 columns on mobile and 4 columns on tablet in Divi

Add the CSS classes two-col-mob four-col-tab in the row settings to achieve this.

3 columns on mobile and 3 columns on tablet

3 columns on mobile and 3 columns on tablet in Divi

Add the CSS classes three-col-mob three-col-tab in the row settings to achieve this.

3 columns on mobile and 6 columns on tablet

3 columns in mobile and 6 columns in tablet

Add the CSS classes three-col-mob six-col-tab in the row settings to achieve this.

1 column on mobile and 2 columns on tablet

2 column in mobile and two columns in tablet

Add the CSS classes two-col-tab in the row settings (one column for mobile is default in Divi so no custom CSS is needed for that).

3. Pro Tip: Use Divi Global Presets To Change Number Of Columns on Mobile And Tablet

This last step is not necessary but it’s a nice way to speed up your design process by adding different mobile row structures to your Divi Global Presets library.

This way, you don’t need to add custom CSS classes each time that you want to change the number of columns in a row. Instead, you can just choose the row numbers that you want to use from the Presets dropdown when you add a new row.

Changing mobile row numbers with Divi Global Presets

  1. Make sure that you have added the custom CSS in the Theme Customizer (see step 1 above)
  2. Create a new row on a page, a post or in a layout in the Divi Library. It does not matter which column structure you choose for the row.
  3. Close the Insert Module modal and open the Row Settings by clicking the cogwheel
  4. Go to Advanced » CSS ID & Classes
  5. Enter the CSS Class(es) that you want to add to your preset (see step 2 above) – for example two-col-mob four-col-tab
  6. Now, click the Preset: Default toggle in the purple top bar of the Row Settings
  7. Click Create new preset from current styles
  8. Give your new Preset a clear name, for example 2 col mob | 4 col tab
  9. Make sure that Assign Preset To Default is set to NO and save by clicking the green checkmark button
  10. Repeat the process to add as many Row Presets you like.

That’s it! To change the number of columns on mobile and tablet, just click the Preset toggle in the row settings and choose one from your list.

Add column CSS classes to your row
1. Add CSS class(es) to your row.
Create global row presets
2. Create a new global preset.
Choose your mobile column structure

3. Use the presets on any page or post.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How To Adjust Divi’s Column Stacking Order on Mobile Devices

👉 Related post: How to Change the Number of Columns in the Divi Blog Module

👉 Related post: Changing the Number of Columns in the Divi Gallery Module at Different Breakpoints

Related posts

6 Comments
  1. Thanks very much for this helpful blog. It has a lot of detail however your explanations are clear and practical. Also you have given many possibilities for different column options on mobile and tablet and the process is easy with your explanation. I have bookmarked this blog for my future designs … thanks very much for your solution.

    Reply
    • That’s nice to hear Rob! I’m really glad you liked it. 🙂

      Reply
  2. Thank you so much! this is really a great tutorial :). I got a small question, hope it is ok to ask as you already gave away a great amount of info.

    I got a 3 column row in Desktop, but i want to have it as 2 column row on mobile, it works but then it is 2 columns +1 beneath. the next row is the same. so you always have:
    2 columns
    1 Column + 1 free spot

    is there a way to fix this?

    Desktop

    2 rows each with 3 columns

    On Mobile I want

    3 rows with 6 columns from above.

    Appreciate it !

    Reply
    • Thanks T, I’m glad you like it! Well, it’s tricky to nest different rows in Divi. I think the easiest way would be to hide the desktop rows on mobile devices (under the Advanced tab) and create a new three row structure for mobile and hide it on desktop. It’s a workaround but it should work. You could save the modules in the columns as global modules in the Divi library, to avoid the need for double updates.

      Reply
  3. Wow! Such an excellent, practical guide, Victor – thanks for sharing. 🙏
    This blows all other similar tuts out of the water, and goes much further than I was even looking for! 🤯
    I’m now off to read/bookmark the rest of your blog.
    Keep up the good work. 👍

    Reply
    • Thanks a lot for your kind words! 🙂 More good Divi stuff is coming up soon.

      Reply

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.