我有一个这样的Bootstrap页面:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
看起来像这样:
-----
|A|B|
-----
因此,如果我在移动设备上查看,A列在顶部,但我希望B在顶部。这个是可能的吗?我试着用推拉的方式,但不起作用。
发布于 2014-08-07 15:08:12
值得注意的是,如果您使用的列不都等于6,则推送量将不等于初始列大小。
如果您有两列(A和B),并且希望列A在"sm“或更大的视口上较小且位于右侧,但位于移动(xs)视口的顶部,则可以使用以下方法:
<div class="row">
<div class="col-sm-4 col-sm-push-8">A</div>
<div class="col-sm-8 col-sm-pull-4">B</div>
</div>
否则,列的对齐方式将显示为关闭。
发布于 2018-09-13 02:50:17
在Bootstrap 4中,假设你想要一个大屏幕的顺序和一个小屏幕的不同顺序:
<div class="container">
<div class="row">
<div class="col-6 order-1 order-lg-2">
This column will be ordered second on large to extra large screens
</div>
<div class="col-6 order-2 order-lg-1">
This column will be ordered first on large to extra large screens
</div>
</div>
</div>
您可以省略上面的order-1
和order-2
。只是为了清楚起见才加进去的。默认顺序将是列在html中出现的顺序。
有关更多信息,请访问https://getbootstrap.com/docs/4.1/layout/grid/#reordering
发布于 2017-11-08 17:16:51
下面的代码适用于我
.row {
display: flex;
flex-direction: column-reverse;
}
https://stackoverflow.com/questions/20979062
复制相似问题