micro-responsive CSS classes

micro-responsive.html

Single:
<div class="desktop-only">desktop-only</div>
<div class="tablet-only">tablet-only</div>
<div class="mobile-only">mobile-only</div>

Combined:
<div class="desktop-only tablet-only">.desktop-only.tablet-only</div>
<div class="tablet-only mobile-only">.tablet-only.mobile-only</div>

micro-responsive.less

//mediaqueries breakpoints
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px)";

.desktop-only.tablet-only {
  display: block;
}
.tablet-only.mobile-only {
  display: block;
}

//Desktop
@media @desktop {
    .desktop-only {
        display: block;
    }
    .tablet-only,
    .mobile-only,
    .tablet-only.mobile-only {
      display: none;
    }
}
//Tablet
@media @tablet {
    .tablet-only {
        display: block;
    }
    .desktop-only,
    .mobile-only {
      display: none;
    }
}
//Mobile
@media @mobile {
    .mobile-only {
        display: block;
    }
    .desktop-only,
    .tablet-only,
    .desktop-only.tablet-only{
      display: none;
    }
}