Is it possible for columns to dynamically change between desktop and tablet like it does from tablet to mobile?

With bootstrap you can set column width depending on sm, md and lg.

I want:

  • 3 columns for desktop (col-lg-4)
  • 2 columns for table (col-md-6)
  • 1 column for mobile (col-sm-12)

The problem I have is with the tablet device as I can’t seem to change 3 columns to 2 columns

Desktop is good :slight_smile:

Tablet is bad

1 Like

If I were to do it I would set the blocks each manually to 33% for 3 columns, 50% for 2 columns and 100% for 1 column

UPDATE: Sorry I totally forgot about the built in mosaic grid feature.

The mosaic grid feature allows you to customize and set the number of columns, you can customize and change it for every breakpoint. Here’s how to use it.

  1. Use the column component

  1. Set your display type to mosaic

  1. Choose the presets to set your no. of columns, change it for every breakpoint you’d like

  1. If you want to set to one column and the option don’t exist, go to settings tab, and set the unit to 1.

Hope that helps!

3 Likes

Amazing, thank you :slight_smile: