Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).
Yes, Responsive can handle that easily.

Under the Visibility tab:

/* =Visibility
-------------------------------------------------------------- */

.hide-desktop {
    display: none;
}

So if you want to hide any given element from the desktop version you would just need to add that class.

Example:

<div class="hide-desktop">
    Will display only for mobile devices
</div>

If you want to hide something on mobile devices.
Example:

<div class="hide-mobile">
    Will display only for desktop devices
</div>

There’s also:

/* =Visibility
-------------------------------------------------------------- */
.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.none {
    display: none;
}

.hide-desktop {
    display: none;
}

.show-desktop {
    display: block;
}

and in Media Queries:
.hide-980 {
        display: none;
    }

    .show-980 {
        display: block;
    }
.hide-650 {
        display: none;
    }

    .show-650 {
        display: block;
    }
.hide-480 {
        display: none;
    }

    .show-480 {
        display: block;
    }
.hide-320 {
        display: none;
    }

    .show-320 {
        display: block;
    }
.hide-240 {
        display: none;
    }

    .show-240 {
        display: block;
    }
Categories: