css – Bootstrap 4中的列排序

前端之家收集整理的这篇文章主要介绍了css – Bootstrap 4中的列排序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有3个列,我想在桌面和移动设备上以不同的方式订购。
目前,我的网格看起来像这样:
<div class="row">
	<div class="col-xs-3 col-md-6">
		1
	</div>
	<div class="col-xs-3 col-md-6">
		2
	</div>
	<div class="col-xs-6 col-md-12">
		3
	</div>
</div>

在移动视图中,我希望具有以下顺序:

1-3-2

不幸的是,我不知道如何使用Bootstrap 4中的.col-md-push- *和.col-md-pull- *类来解决这个问题。

解决方法

使用最新的Bootstrap 4.0.0(稳定版)重新审视此问题。

响应式ordering classes现在是订单优先,订单最后和订单0 – 订单-12

Bootstrap 4推拉类现在是push- {viewport} – {units}和pull- {viewport} – {units},并且xs-infix已被删除。在mobile / xs上获得所需的1-3-2布局将是:Bootstrap 4 push pull demo

由于Bootstrap 4是flexBox,因此很容易更改列的顺序。 cols可以从order-1到order-12进行排序,相应地,例如order-md-12 order-2(md上的最后一次,xs上的2nd,相对于父.row)。

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

2018更新Bootstrap 4.0.0
Col ordering demo

桌面(大屏幕):

移动(小屏幕):

旧版演示
demo – alpha 6
demo – beta (3)

See more Bootstrap 4.0.0 ordering demos

有关:
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

A-C-B A-B-C

原文链接:https://www.f2er.com/css/218060.html

猜你在找的CSS相关文章