Mobile first responsive classes, taken from Bootstrap

ResponsiveClasses

@tablet:                46.875em;   // Approx 750px - Larger Tablets upwards
@desktop:               75em;    // Approx 1200px - Desktops

.mobile() {
    .visible-phone { display: block; }
    .visible-tablet { display: none; }
    .visible-desktop { display: none; }
    .hidden-phone { display: none; }
    .hidden-tablet { display: block; }
    .hidden-desktop { display: block; }
}

.tablet() {
    .visible-phone { display: none; }
    .visible-tablet { display: block; }
    .hidden-phone { display: block; }
    .hidden-tablet { display: none; }
}

.desktop() {
    .visible-tablet { display: none; }
    .visible-desktop { display: block; }
    .hidden-tablet { display: block; }
    .hidden-desktop { display: none; }
}

.mobile;

@media all and (min-width: @tablet) {
    .tablet;
}

@media all and (min-width: @desktop) {
    .desktop;
}