A super lightweight library to show and hide elements on HTML based on responsive design.

responsive-show-hide.css

/*CSS Responsive design show-hide*/

/*
USAGE

The class "res" has two modes, "show" and "hide".
The intended direction is from a larger to a smaller device. 

Assign the class "res-show" to any HTML tag when you want the wrapped content
to be hidden on larger devices and shown on smaller ones.

Assign the class "res-hide" to any HTML tag when you instead want
the wrapped content to be shown on larger devices and hidden on smaller ones.

Define "max-width" based on the limit that suits your needs (standard 600px),
or add extra rules as you deem necessary.
*/

/*© Alessandro Zanardi - MIT license
(http://gist.github.com/pensierinmusica/6202494)*/


.res-show {
  display: none;
}

@media (max-width: 600px) {
  .res-show {
    display: inline;
  }
  .res-hide {
    display: none;
  }
}