Bootstrap v4.4.1 d-md-none скрывает элемент на больших экранах

Question

Я использую карты Bootstrap v4.4.1, чтобы показать 3 карты на большом экране и скрыть и показать 2 карты на среднем экране. Я использую d-md-none класс, чтобы скрыть 3-ю карту на экране md, но она скрывает 3-ю карту на весь экран.

Не уверен, что я делаю неправильно.

<div class="container  mt-5">
  <div class="row">
    <div class="col-xl-4 col-md-6">
        <div class="card" >
          <img src="images/trophy.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

          </div>
        </div>
    </div>

        <div class="col-xl-4 col-md-6">
        <div class="card" >
          <img src="images/trophy.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
    </div>

        <div class="col-xl-4 d-md-none">
        <div class="card" >
          <img src="images/trophy.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
    </div>

  </div>
</div>

https://codepen.io/KGuide/pen/rNVZKmE

Answer 1

Добавить класс d-none d-lg-block

<div class="col-xl-4 d-none d-lg-block">