我有这样的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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。