change grid column order in mobile mode

Question

I have one requirement where i have to show four grid column in desktop mode like in this which is correct.

For that i used below html code:

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

But when i see the same in mobile this shows like below:

1
2
3
4

But my requirement is it should show like below in mobile:

1 2
3 4

How could i do the same using above html code?

Answer 1

Use col-xs-6 instead of col-xs-12
See 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>