带有flexbox的堆栈列-移动屏幕上2列，大屏幕上3列

Question

我正在尝试将Flexbox设计为在大屏幕上具有3列，在移动屏幕上具有2列（请参见下面的图像1和2）。这是我的JS Fiddle和我的代码：

https://jsfiddle.net/kwxj83v6/6/

在大屏幕上可以正常运行，但无法使其在小屏幕上正确呈现。

    <div class="row">
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Semi Truck</h6>
        </div>
      </div>
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Box Truck</h6>https://jsfiddle.net/kwxj83v6/6/
        </div>
      </div>
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Dump Truck</h6>
        </div>
      </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Tow Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Tank Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Pickup Truck</h6>
      </div>
    </div>
  </div>

谢谢

Answer 1

Bootstrap CSS的一部分如下：

@media (min-width: 992px) {
    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

这可确保在大于992px的屏幕上，flex子元素的大小为33％。 .col-xs-6没有这样的CSS定义，因此您需要在一个单独的CSS文件中添加自己。类似于以下内容：

@media (max-width: 992px) {
    .col-xs-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}