如何根据屏幕大小更改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列和第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-->