<div class="container">
  <div class="d-none d-sm-block">
    ⚽️ Je me cache au breakpoint <code>xs</code>
  </div>
  <div class="d-block d-sm-none" style="opacity: 0.1">
    ⚽️ Je me cache au breakpoint <code>xs</code>
  </div>
</div>

<div class="container">
  <div class="d-sm-none d-md-block">
    🏀 Je me cache au breakpoint <code>sm</code>
  </div>
  <div class="d-none d-sm-block d-md-none" style="opacity: 0.1">
    🏀 Je me cache au breakpoint <code>sm</code>
  </div>
</div>

<div class="container">
  <div class="d-md-none d-lg-block">
    🏈 Je me cache au breakpoint <code>md</code>
  </div>
  <div class="d-none d-md-block d-lg-none" style="opacity: 0.1">
    🏈 Je me cache au breakpoint <code>md</code>
  </div>
</div>

<div class="container">
  <div class="d-lg-none d-xl-block">
    🥎 Je me cache au breakpoint <code>lg</code>
  </div>
  <div class="d-none d-lg-block d-xl-none" style="opacity: 0.1">
    🥎 Je me cache au breakpoint <code>lg</code>
  </div>
</div>

<div class="container">
  <div class="d-xl-none d-xxl-block">
    🏐 Je me cache au breakpoint <code>xl</code>
  </div>
  <div class="d-none d-xl-block d-xxl-none" style="opacity: 0.1">
    🏐 Je me cache au breakpoint <code>xl</code>
  </div>
</div>

<div class="container">
  <div class="d-xxl-none">
    🎱 Je me cache au breakpoint <code>xxl</code>
  </div>
  <div class="d-none d-xxl-block" style="opacity: 0.1">
    🎱 Je me cache au breakpoint <code>xxl</code>
  </div>
</div>

.demo {
  text-align: center;
}