bootstrp 网格使用

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; "><p>1</p></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;"><p>2</p><p>3</p></div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; "><p>4</p></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;"><p>5</p></div>
    </div>
</div>
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3" style="background-color: #dedef8;"><p>111.</p></div>
    </div>
</div>
<div class="container">
        <h1>Hello, world!</h1>
        <div class="row">
            <div class="col-xs-6 col-md-3" style="background-color: #dedef8;">
            <p>1</p>
        </div>
        <div class="col-xs-6 col-md-9" style="background-color: #dedef8;">
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; ">
                    <p>2</p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; ">
                    <p> 3</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; ">
                    <p>4</p>
                </div>
                <div class="col-md-6" style="background-color: #B18904;">
                    <p>5.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; ">
                    <p>4</p>
                </div>
                <div class="col-md-6" style="background-color: #B18904;">
                    <p>5.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>排序前</p>
        <div class="col-md-4" style="background-color: #dedef8; ">
            1 我在左边
        </div>
        <div class="col-md-8" style="background-color: #dedef8; ">
           2 我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>排序后</p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; ">
            3 我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; ">
           4 我在右边
        </div>
    </div>
</div>