title: Bootstrap visibility utility is hiding an element when it shouldn't
body: <p>I am trying to hide "Updated: " on smaller screen sizes and only keep the date - which works fine. The problem is, it hides the date and only shows the "Updated: " part in the <code>span</code> on larger screen sizes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.u-date-box {
        position: absolute;
        overflow: hidden;
        z-index: 1;
        bottom: 5%;
        left: 0;
        height: 2rem;
        background: #FFF;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="u-date-box"&gt;
        &lt;p&gt;
          &lt;span class="d-none d-sm-block"&gt;Updated: &lt;/span&gt;
          &lt;%= @post.updated_at.strftime('%b %d, %Y') %&gt;
        &lt;/p&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know <code>d-none d-sm-block</code> is the issue as I tried removing those classes from the span and everything displayed fine. Any idea why this happens?</p>