css - bootstrap -更改容器宽度的卡片样式

我想为中型和小型设备显示不同的卡视图。我需要根据容器的宽度更改卡片样式。
对于大型设备，我具有以下卡片样式：

<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#">Project One</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
        </div>
      </div>
    </div>

对于中小型设备，我需要这样做：

<div class="row">
    <div class="col-md-7">
      <a href="#">
        <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-5">
      <h3>Project One</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
      <a class="btn btn-primary" href="#">View Project</a>
    </div>
  </div>

我不知道该怎么做。有人可以建议最佳/最优化的方式来实现这一目标吗？

最佳答案

使用Bootstrap Display属性以特定的屏幕尺寸隐藏div。
https://getbootstrap.com/docs/4.0/utilities/display/