изменить порядок столбцов сетки в мобильном режиме

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
См. Система сетки начальной загрузки

<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>