How can I change the number of Bootstrap Carousel Items based on screen size?

On large screens I want each carousel slide item to have 3 columns, each with their own content...

<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*

However, on mobile, I want to reformat the layout and show only one column (divided into carousel items) at a time.

<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-->

Currently, the only solution I can think of is to have 2 carousels, and only show the one depending on the screen size using media queries, but I don't know if that's the best way to handle this?

Is there a way I can actively change carousel items responsively, and if so how do I achieve this?

Edit

My current solution is to just remove the columns as the screen space gets smaller (or more accurately add columns as the screen gets bigger). This isn't ideal, though, because mobile users will never see columns 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-->