Visibility classes

visibility.css

/* visibility */
.hidden {
  display: none!important;
}
@media (max-width: 599px) {
  .hidden-p { display: none!important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hidden-tp { display: none!important; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hidden-tl { display: none!important; }
}
@media (min-width: 1200px) and (max-width: 1799px) {
  .hidden-d { display: none!important; }
}
@media (min-width: 1800px) {
  .hidden-l { display: none!important; }
}

/* display: initial doesn't work in IE11 */
/* https://caniuse.com/#search=initial */
@media (max-width: 599px) {
  .visible-p { display: initial!important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .visible-tp { display: initial!important; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .visible-tl { display: initial!important; }
}
@media (min-width: 1200px) and (max-width: 1799px) {
  .visible-d { display: initial!important; }
}
@media (min-width: 1800px) {
  .visible-l { display: initial!important; }
}

Media queries:

• -p Phone: <600px
• -tp Tablet Portrait: ≥600px
• -tl Tablet Landscape: ≥900px
• -d Desktop: ≥1200px
• -l Large screens: ≥1800px

Inspired by: https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862