Javascript 将转盘中的所有卡显示在下屏幕的单行中

我正在制作旋转木马，它总共有4张卡，每张幻灯片显示2张图像。但当屏幕尺寸减到最小时，我得到一张一张叠成两行的卡片。是否有一种方法可以将所有卡片放在一行中，每个幻灯片一张卡片，用于较小的屏幕

<div class="carouselBox">
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner mr-0">
    <div class="carousel-item active col-12 col-md-6">
      <div class="row productFlex">
        <div class="box">
          <div class="card">
           
          </div>
          <div class="card">
            
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item col-12 col-md-6">
      <div class="row productFlex">
        <div class="box">
          <div class="card">
            
          </div>
          <div class="card">
            
          </div>
        </div>
      </div>
    </div>
</div>
<div>

---

请附上您的CSSI已附上CSS供您参考是的，有。但是，它需要JavaScript来确定幻灯片中每个屏幕大小应显示多少张卡，并将重新呈现幻灯片的内容。您的第一个

.carousel项目

具有类

col-12 md-6

。你的意思是

col-12 col-md-6

？此外，您的第二个

.carousel项目也有class
col-12-md-6
。这不应该是
col-12 col-md-6
？“但当屏幕尺寸最小化时，我会将卡分为两行，一行一行堆叠起来。”我没有看到这种行为。“有没有一种方法可以让所有的卡片排成一行，每个幻灯片一张卡片，屏幕更小？”这句话不清楚。
.box{
        display: -ms-flexbox;
        display: flex;
        flex-direction: row;
        -ms-flex-wrap: wrap; 
       flex-wrap: nowrap;  
        padding: 1rem;
        min-height: 434px;
        
    }

    .box > .card{
        margin-left:1rem;
        margin-bottom: 1.5rem;
        min-width: 100%;
    }
    .card{
        background: var(--unnamed-color-113052) 0% 0% no-repeat padding-box;
        background: #113052 0% 0% no-repeat padding-box;
        flex: 48%;
        max-width: 100%;
    }