bootstrap的.card-columns瀑布流显示列数修改

bootstrap多列卡片浮动排版可以实现卡片瀑布流显示，官方说明是：

將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果，
卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更方便实用的浮动对齐，
顺序是从上到下、从左到右。

官方默认显示是：小窗口下单列显示，大窗口下3列显示

但是现在想要他在小窗口下2列显示

在网上搜到的解决办法是重写 .card-columns 如下：

 @@media (min-width:350px) {  // 修改此处最小宽带为350px
        .card-columns {
            column-count: 2; // 修改显示列数为 2
        }
    }

如上方法确实可以实现两列显示，但是会出现显示bug，如下：

可以看到，最底下的一个car的元素被切割成两部分了，后面部分显示到第二列了。

网上也没有搜到其他解决办法，为了解决这个问题，所以到bootstrap.css源码中寻找，

最后发现可以通过重写完整的card-columns来解决

@media (min-width: 350px) {   // 修改为350px
        .card-columns {
            -webkit-column-count: 2;  // 修改为2
            -moz-column-count: 2;  // 修改为2
            column-count: 2;  // 修改为2
            -webkit-column-gap: 1.25rem;
            -moz-column-gap: 1.25rem;
            column-gap: 1.25rem;
            orphans: 1;
            widows: 1;
        }
        .card-columns .card {
            display: inline-block;
            width: 100%;
        }
    }

显示正常