如何订购 divs 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 了解更多信息。