Bootstrap在大屏幕上显示4列，在超小屏幕上显示2列

Question

我有1行4列。在超小屏幕中，我想将它显示在第2行。对于其他尺寸可以保持1排。

这就是我的尝试：

<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
        1
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        2
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
        3
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        4
    </div>
</div>

仅当单元格1中有长文本时才会出现问题：

我想要这样的结果：

但是当我有一篇长篇文章时，我得到了以下内容：

我想得到以下内容：

是否可以不创建两行？旧布局适用于大屏幕，我必须为移动设备执行此操作，但不更改旧布局。

Answer 1

尝试将所有“xs”css放在两列中，对我有用：

<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        1
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        2
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        3
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        4
    </div>
</div>