Bootstrap栅格布局

<div class="container">
    <div class="page-header">
        <h1>Bootstrap栅格布局</h1>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit!</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit!</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit!</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit!</div>
    </div>
    <div class="row">
        <div class="col-md-2">1</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">3</div>
        <div class="col-md-2">4</div>
        <div class="col-md-2">5</div>
        <div class="col-md-2">6</div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-2 col-lg-offset-3">列偏移1</div>
        <div class="col-md-2">列偏移2</div>
        <div class="col-md-2">列偏移3</div>
        <div class="col-md-2">列偏移4</div>
    </div>
    <div class="row">
        <div class="col-md-2">1</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">3</div>
        <div class="col-md-2">4</div>
        <div class="col-md-2">5</div>
        <div class="col-md-2">6</div>
    </div>
    <div class="row">
        <div class="col-md-1 col-md-push-1 col-lg-push-0">列排序1</div>
        <div class="col-md-2">列排序2</div>
        <div class="col-md-3">列排序3</div>
        <div class="col-md-4 col-md-pull-2 col-lg-pull-0" style='background-color:skyblue;'>列排序4</div>
    </div>
</div>