html – 列顺序引导程序

发布时间：2020-12-14 19:45:29 所属栏目：资源来源：网络整理

导读：我有这样的bootstrap布局： div class="row" div class="col-md-2" 1 /div div class="col-md-8" 2 /div div class="col-md-2" 3 /div/div 它看起来像这样： 1 2 3 在移动设备上,第1列位于顶部,这就是我想要的,但是我希望3列出现在第二列,然后2列成为第三列.

我有这样的bootstrap布局：

<div class="row">
    <div class="col-md-2">
    1
    </div>
    <div class="col-md-8">
    2
    </div>  
    <div class="col-md-2">
    3
    </div>
</div>

它看起来像这样：

1 2 3

在移动设备上,第1列位于顶部,这就是我想要的,但是我希望3列出现在第二列,然后2列成为第三列.

这可能吗？

解决方法

您可以使用bootstrap( https://getbootstrap.com/docs/4.1/utilities/flex/#order)定义的类,如下所示

.row > div {
 border:2px solid;
 text-align:center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-2 order-0 order-md-0">
      1
    </div>
    <div class="col-md-8 order-2 order-md-1">
      2
    </div>
    <div class="col-md-2 order-1 order-md-2">
      3
    </div>
  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!