如何订购div Bootstrap网格

Question

我如何管理div的订单？

我现在的情况：

我需要什么：

代码：

<div class="row">
    <div class="col-lg-4 bg-info">
        test <br><br><br><br><br>
    </div>
    <div class="col-lg-4 bg-info">
        1
    </div>
    <div class="col-lg-4 bg-info">
        2
    </div>
    <div class="col-lg-4 bg-info">
        test </br></br></br></br></br>
    </div>
    <div class="col-lg-4 bg-info">
        4
    </div>
</div>

Answer 1

如果必须在当前HTML没有任何更改的情况下完成，则可以将Bootstrap的类pull-right添加到右侧块中。

您的代码结构应为：

<div class="container">
  <div class="row">
    <div class="col-xs-6">test</div>

    <div class="col-xs-6 pull-right">1</div>
    <div class="col-xs-6 pull-right">2</div>
    <div class="col-xs-6 pull-right">test</div>

    <div class="col-xs-6">4</div>
  </div>
</div>

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.bg-info {
  margin-bottom: 10px;
}

<div class="container">
  <div class="row">
  <div class="col-xs-6 bg-info">
    test <br><br><br><br><br>
  </div>
  <div class="col-xs-6 pull-right bg-info">
    1
  </div>
  <div class="col-xs-6 pull-right bg-info">
    2
  </div>
  <div class="col-xs-6 pull-right bg-info">
    test <br><br><br><br><br>
  </div>
  <div class="col-xs-6 bg-info">
    4
  </div>
</div> 
</div>

Answer 2

每行有12个单位的空间。所以你可以使用嵌套的div来实现卵形

<div class="col-md-4">
    <div class="col-md-12">
           //first box first column
    </div>
    <div class="col-md-12">
          //second box first column
    </div>
</div>
<div class="col-md-4">
    <div class="col-md-12">
           //first box second column
    </div>
    <div class="col-md-12">
          //second box second column
    </div>
     <div class="col-md-12">
          //third box second column
    </div>
</div>

Answer 3

您可以使用.col-md-push- *和.col-md-pull- *修饰符类轻松更改网格列的顺序。看一下here了解更多信息。