title: Bootstrap 4 - hide on xs and sm not working
body: <p>I'm creating xs view for my app, and my problem is, when i want to hide one div on small and extra small devices this extra small is not working, i followed bootstrap 4 documentation, and i don't know why this is not working.</p>
  
  <pre><code>&lt;div class="headers"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-lg-6 col-md-4 col-sm-5"&gt;Produkt&lt;/div&gt;
            &lt;div class="col-2 d-sm-none d-md-block d-flex justify-content-start"&gt;Cena&lt;/div&gt;
            &lt;div class="col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center"&gt;Ilość&lt;/div&gt;
            &lt;div class="col-lg-2 col-sm-3 d-flex justify-content-end"&gt;Wartość&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I want to put on second div: </p>
  
  <blockquote>
    <p>d-none d-md-block</p>
  </blockquote>
  
  <p>Show when screen is on md mode. When i set this on sm and xs is not hidding. When i add only d-sm-none to this line it's working well but not on xs.</p>
  
  <p><a href="https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements" rel="noreferrer">https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements</a></p>