引导-md-4和col 6不兼容

Question

我有3列为中型屏幕(col-md-4)。此外，我还使用-xs-6为移动设备设置了2列。

示例代码

<div class="container">
    <div class="row">
        <div class="col-md-4 col-xs-6">CONTENT</div>
        <div class="col-md-4 col-xs-6">CONTENT</div>
        <div class="col-md-4 col-xs-6">CONTENT</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-xs-6">CONTENT</div>
        <div class="col-md-4 col-xs-6">CONTENT</div>
        <div class="col-md-4 col-xs-6">CONTENT</div>
    </div>
</div>

问题在于手机的输出。

输出- col-md-4和col 6

col-xs-6

col-xs-6

col-xs-6

col-xs-6

期望输出

col-xs-6

col-xs-6

col-xs-6

有办法解决这个问题吗。

谢谢

样本工作

链接

Answer 1

 <div class="container">
        <div class="row">
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>    
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>
        </div>
 </div>

Answer 2

在引导4和更高版本中，您可以使用：

<div class="container">
        <div class="row">
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>    
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>
        </div>
 </div>