css.html

    <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>

    <h3>Test case</h3>
    <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
    <h4>Visible on...</h4>
    <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
    <ul class="responsive-utilities-test visible-on">
      <li>
        <span class="hidden-sm">Small</span>
        <span class="visible-sm">&#10004; Visible on small</span>
      </li>
      <li>
        <span class="hidden-md">Medium</span>
        <span class="visible-md">&#10004; Visible on medium</span>
      </li>
      <li>
        <span class="hidden-lg">Large</span>
        <span class="visible-lg">&#10004; Visible on large</span>
      </li>
    </ul>
    <h4>Hidden on...</h4>
    <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
    <ul class="responsive-utilities-test hidden-on">
      <li>
        <span class="visible-sm">Small</span>
        <span class="hidden-sm">&#10004; Hidden on small</span>
      </li>
      <li>
        <span class="visible-md">Medium</span>
        <span class="hidden-md">&#10004; Hidden on medium</span>
      </li>
      <li>
        <span class="visible-lg">Large</span>
        <span class="hidden-lg">&#10004; Hidden on desktop</span>
      </li>
    </ul>

  </div>