如何根据屏幕尺寸更改 Bootstrap Carousel 项目的数量？

Question

在大屏幕上，我希望每个轮播幻灯片项目都有 3 列，每列都有自己的内容......

<div class="carousel-item active">
   <div class="row">
      <div class="col-sm-4 work">
         <div class="work-inner">
            item 1 content
         </div>
      </div>
      <div class="col-sm-4 work">
         <div class="work-inner">
            item 2 content
         </div>
      </div>
      <div class="col-sm-4 work">
         <div class="work-inner">
            item 3 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->
*more carousel items here*

但是，在移动设备上，我想重新格式化布局并一次仅显示一列（分为轮播项目）。

<div class="carousel-item active">
   <div class="row">
      <div class="col-sm-12 work">
         <div class="work-inner">
            item 1 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->

<div class="carousel-item">
   <div class="row">
      <div class="col-sm-12 work">
         <div class="work-inner">
            item 2 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->

<div class="carousel-item">
   <div class="row">
      <div class="col-sm-12 work">
         <div class="work-inner">
            item 3 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->

目前，我能想到的唯一解决方案是有 2 个轮播，并且仅使用媒体查询根据屏幕大小显示一个轮播，但我不知道这是否是处理此问题的最佳方法？

有没有一种方法可以响应式地主动更改轮播项目，如果可以，我该如何实现这一目标？

---

编辑

我当前的解决方案是随着屏幕空间变小而删除列（或者更准确地随着屏幕变大而添加列）。但这并不理想，因为移动用户永远不会看到第 2 列和第 3 列。

<div class="carousel-item active">
   <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-4 work">
         <div class="work-inner">
            item 1 content
         </div>
      </div>
      <div class="col-md-6 col-lg-4 d-none d-md-block work">
         <div class="work-inner">
            item 2 content
         </div>
      </div>
      <div class="col-lg-4 d-none d-lg-block work">
         <div class="work-inner">
            item 3 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->