javascript - 将轮播中的所有卡片单行显示为下屏

Question

我正在研究轮播，它总共有 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>

下面是CSS

.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%;
    }

标签： javascripthtmljquerycss