Html 如何对divs引导网格进行排序

如何管理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>

测试
1.
2.
试验





4.

如果必须在当前

HTML

中不做任何更改的情况下执行，则可以将引导的类

向右拖动

添加到右侧块

您的代码结构应该是：

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

测试
1.
2.
测试
4.

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

每行有12个空间单位。因此，可以使用嵌套的div来实现ovjective

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

//第一框第一列
//第二框第一列
//第一框第二列
//第二框第二列
//第三箱第二列

Example手机屏幕上的订单如何？如果没有代码示例，这应该是一个注释而不是答案。但是你在实现OP所寻求的方法上是对的。