引导网格系统在xs断点处失败

Question

我是Bootstrap网格系统的新手，它在xs断点处发生了代码中断，在该行中两张卡必须出现在同一行上，但是从上一行下推的卡会创建一个仅包含一张卡的新行

        <div class="row equal-height">
           <div class="col-xs-6 col-md-4" >
         <div class="card">
            </div>
             </div>
         <div class="col-xs-6 col-md-4" >
         <div class="card">
            </div>
             </div>
          <div class="col-xs-6 col-md-4" >
         <div class="card">
            </div>
             </div>
            </div>
            <div class="row equal-height">
           <div class="col-xs-6 col-md-4" >
         <div class="card">
            </div>
             </div>
         <div class="col-xs-6 col-md-4" >
         <div class="card">
            </div>
             </div>
          <div class="col-xs-6 col-md-4" >
         <div class="card">
            </div>
             </div>
            </div>

此代码在xs断点css上中断了网格系统，如下所示

        .row.equal-height {
     max-height: 12%;
       display: flex;
      flex-wrap: wrap;
  justify-content: space-between;
           max-width: 100%;
       }
     .row.equal-height > [class*='col-'] {
          display: flex;
            flex-direction: column;
         justify-content: space-between;
           }