Bootstrap中的列排序4 [英] Column ordering in Bootstrap 4

问题描述

我有3列，我想以不同的方式在台式机和手机上订购。
目前，我的网格如下所示：

< < 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>

不幸的是，我没有在Bootstrap 4中使用.col-md-push- *和.col-md-pull- *类来解决这个问题。

解决方案

使用最新的 Bootstrap 4.0.0 （稳定版）重温这个问题。

手机（小屏幕）：

旧版本演示

demo - alpha 6

demo - beta（3）

查看更多Bootstrap 4.0.0订购演示
$ b

---

相关：

使用推/拉和col-md-12在Bootstrap 4中进行列排序

Bootstrap 4更改列顺序

I've 3 columns which i want to order in different ways on desktop and mobile. Currently, my gird looks like this:

<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>

In the mobile view I want to have the following order:

1-3-2

Unfortunately I don't get how to solve this with the .col-md-push-* and .col-md-pull-* classes in Bootstrap 4.

解决方案

Revisiting this question with the latest Bootstrap 4.0.0 (stable).

The responsive ordering classes are now order-first, order-last and order-0 - order-12

The Bootstrap 4 push pull classes are now push-{viewport}-{units} and pull-{viewport}-{units} and the xs- infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: Bootstrap 4 push pull demo

---

Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12, responsively such as order-md-12 order-2 (last on md, 2nd on xs) relative to the parent .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 Update Bootstrap 4.0.0
Col ordering demo

Desktop (larger screens):

Mobile (smaller screens):

Older version demos
demo - alpha 6
demo - beta (3)

See more Bootstrap 4.0.0 ordering demos

---

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

这篇关于Bootstrap中的列排序4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！