Responsive Breakpoints Boilerplate

mobile.css

.show_on_phones, .show_on_tablets, .hide_on_desktop {
  display: none;
}

@media only screen and (max-width: 768px) and (min-width: 481px) {
  /* tablets only */
  .show_on_tablets {
    display: block;
  }
  .show_on_desktop, .hide_on_tablets {
    display: none;
  }
}
@media only screen and (max-width: 480px) {
  /* phones */
  .show_on_phones {
    display: block;
  }
  .show_on_desktop, .hide_on_phones {
    display: none;
  }
}