Bootstrap 4 - hide on xs and sm not working

Issue

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.

<div class="headers">
        <div class="row">
          <div class="col-lg-6 col-md-4 col-sm-5">Produkt</div>
          <div class="col-2 d-sm-none d-md-block d-flex justify-content-start">Cena</div>
          <div class="col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center">Ilość</div>
          <div class="col-lg-2 col-sm-3 d-flex justify-content-end">Wartość</div>
        </div>
      </div>

I want to put on second div:

d-none d-md-block

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.

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Solution

It's because you should use d-none instead of d-flex.

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-4 col-sm-5">Produkt</div>
        <div class="col-2 d-none d-md-flex justify-content-start">Cena</div>
        <div class="col-lg-2 col-md-3 col-sm-4 d-flex justify-content-center">Ilość</div>
        <div class="col-lg-2 col-sm-3 d-flex justify-content-end">Wartość</div>
    </div>
</div>

https://codeply.com/go/XUSWoSdFcP

Related:
Missing visible-** and hidden-** in Bootstrap v4

Answered By - Zim