Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

mobile tablets desktops large desktops
._visible-phones_ visible hidden hidden hidden
._visible-tablets_ hidden visible hidden hidden
._visible-desktops_ hidden hidden visible hidden
._visible-large-desktops_ hidden hidden hidden visible
._hidden-phones_ hidden visible visible visible
._hidden-tablets_ visible hidden visible visible
._hidden-desktops_ visible visible hidden visible
._hidden-large-desktops_ visible visible visible hidden

Test responsive

Visible on phones
Hidden on phones
Visible on tablets
Hidden on tablets
Visible on desktops
Hidden on desktops
Visible on large
Hidden on large

Hidden on phones
Visible on phones
Hidden on tablets
Visible on tablets
Hidden on desktops
Visible on desktops
Hidden on large desktops
Visible on large

Visible on all desktops
Hidden on phones and tablets
Visible on desktops
Hidden on desktops
Hidden on large desktops
Visible on large