Bootstrap - Responsive Classes

Do you have a Joomla! module that you would like to only show to your phone visitors? Or, want to show a module across all devices but having different content per device? With Jooma! 3 and it's pre-loaded 'Bootstrap' code, this is a very easy task to do. Look over the grid below, find a Bootstrap class you would like to use and copy/paste the class into your module's 'Module Class Suffix' box (under the Advance Tab) and go about your business! You can have more that one of these classes active within the same module as well. Just separate the classes with a space. Now, for some older templates you might need to add a space in front of the very first class. This is a template by template thing so you'll have to play around a little. This is a really cool and simple way to take total control over what shows and what needs to be hidden, by device, on your website!

Responsive utility classes

For faster mobile-friendly development, use these 'Module Class Suffix' classes for showing and hiding module content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

ClassPhones
767px and below
Tablets
979px to 768px
Desktops
Default
visible-phone
Visible
visible-tablet
Visible
visible-desktop
Visible
hidden-phone
Visible Visible
hidden-tablet
Visible Visible
hidden-desktop
Visible Visible

KEY: Green boxes indicate that class is visible in your current viewport.

Typing any of these classes into your module's 'Module Class Suffix' box (under the Advanced tab) will allow you to show/hide that specific module based on what device is viewing the module page.

Source: https://getbootstrap.com/2.3.2/scaffolding.html