responsive hiding

.if-xs, .if-not-sm, .if-not-md, .if-not-lg {
  display:inherit;
}
.if-not-xs, .if-sm, .if-md, .if-lg  {
  display:none;
}

@media  (min-width: 48em) {
  .if-xs, .if-not-sm {
    display:none;
  }
  .if-not-xs, .if-sm {
    display:inherit;
  }
}

@media  (min-width: 64em) {
  .if-sm, .if-not-md {
    display:none;
  }
  .if-not-sm, .if-md {
    display:inherit;
  }
}
@media  (min-width: 75em) {
  .if-md, .if-not-lg {
    display:none;
  }
  .if-lg, .if-not-md {
    display:inherit;
  }
}