我有这样的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>
