在移动模式下更改网格列的顺序

Question

我有一个要求，我必须在桌面模式下显示四个网格列，例如，这是正确的。

为此，我在html代码下面使用了

<div class="row">
    <div class="col-xs-12 col-md-3">
        <div class="alert alert-info">
            1
        </div>
    </div>
    <div class="col-xs-12 col-md-3">
        <div class="alert alert-warning">
            2
        </div>
    </div>


    <div class="col-xs-12 col-md-3">
        <div class="alert alert-danger">
            3
        </div>
    </div>
    <div class="col-xs-12 col-md-3">
        <div class="alert alert-info">
            4
        </div>
    </div>
</div>

但是当我在移动设备中看到相同的内容时，显示如下：

1
2
3
4

但是我的要求是它应该在移动设备中显示如下：

1 2
3 4

我如何使用上面的html代码做同样的事情？

Answer 1

使用col-xs-6代替col-xs-12
参见Bootstrap Grid System

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
    <div class="col-xs-6 col-md-3">
        <div class="alert alert-info">
            1
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="alert alert-warning">
            2
        </div>
    </div>


    <div class="col-xs-6 col-md-3">
        <div class="alert alert-danger">
            3
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="alert alert-info">
            4
        </div>
    </div>
</div>