show and hide classes for media queries

dabblet.css

/**
 * show and hide classes for media queries
 */
 
 h1 {font-size: 1.5em; float: right;}
 h1:after {
  content: "< 480px";
  display: block;
 }

.show-for-smaller-480 {display: inherit !important;}
.hide-for-smaller-480,
.show-for-480,
.show-for-600,
.show-for-768,
.show-for-992  {display: none !important;}

@media only screen and (min-width: 480px) {
  h1:after {content: ">= 480px";}
  
  .show-for-480,
  .hide-for-smaller-480 {display: inherit !important;}
  .hide-for-480,
  .show-for-smaller-480 {display: none !important;}
}

@media only screen and (max-width: 599px) {
  .show-for-smaller-600 {display: inherit !important;}
  .hide-for-smaller-600 {display: none !important;}
}

@media only screen and (min-width: 600px) {
  h1:after {content: ">= 600px";}
  
  .show-for-600 {display: inherit !important;}
  .hide-for-600,
  .show-for-smaller-600 {display: none !important;}
}

@media only screen and (max-width: 767px) {
  .show-for-smaller-768 {display: inherit !important;}
  .hide-for-smaller-768 {display: none !important;}
}

@media only screen and (min-width: 768px) {
  h1:after {content: ">= 768px";}
  
  .show-for-768 {display: inherit !important;}
  .hide-for-768,
  .show-for-smaller-768 {display: none !important;}
}

@media only screen and (max-width: 991px) {
  .show-for-smaller-992 {display: inherit !important;}
  .hide-for-smaller-992 {display: none !important;}
}

@media only screen and (min-width: 992px) {
  h1:after {content: ">= 992px";}
  
  .show-for-992 {display: inherit !important;}
  .hide-for-992,
  .show-for-smaller-992 {display: none !important;}
}

dabblet.html

<h1>Width: </h1>

<h3>480</h3>

<div class="show-for-smaller-480">.show-for-smaller-480</div>
<div class="hide-for-smaller-480">.hide-for-smaller-480</div>
<div class="show-for-480">.show-for-480</div>
<div class="hide-for-480">.hide-for-480</div>

<h3>600</h3>

<div class="show-for-smaller-600">.show-for-smaller-600</div>
<div class="hide-for-smaller-600">.hide-for-smaller-600</div>
<div class="show-for-600">.show-for-600</div>
<div class="hide-for-600">.hide-for-600</div>

<h3>768</h3>

<div class="show-for-smaller-768">.show-for-smaller-768</div>
<div class="hide-for-smaller-768">.hide-for-smaller-768</div>
<div class="show-for-768">.show-for-768</div>
<div class="hide-for-768">.hide-for-768</div>

<h3>992</h3>

<div class="show-for-smaller-992">.show-for-smaller-992</div>
<div class="hide-for-smaller-992">.hide-for-smaller-992</div>
<div class="show-for-992">.show-for-992</div>
<div class="hide-for-992">.hide-for-992</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}