title: Show and Hide depend on screen size
body: <pre><code>&lt;style&gt;
  @media screen and (min-width: 0px) and (max-width: 400px) {
    #my-content{ display: none; }  /* show it on large screen */
  }
  @media screen and (min-width: 401px) and (max-width: 1024px) {
    #my-content{ display: block; }   /* hide it small screens */
  }
  &lt;style&gt;
  &lt;div id="my-content"&gt;
  </code></pre>
  
  <p>This code works but I want to add a button for show/hide this "my-content" on small device. I don't want to show this button in large display. This button only show on small screen. I want to use this code with a bootstrap site. </p>