[BOOTSTRAP] MEDIDAS

<div class="d-none d-sm-block"> hidden-xs
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

Screen Size Class
Hidden on all   .d-none
Hidden only on xs   .d-none .d-sm-block
Hidden only on sm   .d-sm-none .d-md-block
Hidden only on md   .d-md-none .d-lg-block
Hidden only on lg   .d-lg-none .d-xl-block
Hidden only on xl   .d-xl-none
Visible on all  .d-block
Visible only on xs  .d-block .d-sm-none
Visible only on sm  .d-none .d-sm-block .d-md-none
Visible only on md  .d-none .d-md-block .d-lg-none
Visible only on lg  .d-none .d-lg-block .d-xl-none
Visible only on xl  .d-none .d-xl-block


//possivel padrão bom
{{--mobile--}}
<img src="/images/paes/cafe.jpg" class="d-block d-xxl-none d-xl-none d-lg-none d-md-none d-sm-none" alt="">

{{--desktop--}}
<img src="/images/paes/cafe.jpg" class="d-none d-sm-block d-md-block d-lg-block d-xl-block " alt="">