通过 Bootstrap4 对列进行排序
[英] Order columns through Bootstrap4
本文介绍了通过 Bootstrap4 对列进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有 3 列，我想在桌面和移动设备上以不同的方式订购它们.目前，我的网格看起来像这样:
<div class="col-xs-3 col-md-6">1
<div class="col-xs-3 col-md-6">2
<div class="col-xs-6 col-md-12">3
在移动视图中，我希望有以下输出:
1-3-2
不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题.
解决方案
2021 - Bootstrap 5
响应式排序类现在是 order-first、order-last 和 order-0 - order-5
移动设备(较小的屏幕):
还可以使用 flexbox 方向工具 更改列顺序...
<div class="row flex-column-reverse flex-md-row"><div class="col-md-8">2
<div class="col-md-4">手机上的第一名
演示:Bootstrap 4.1 Change Order with Flexbox Direction
旧版本演示
演示 - alpha 6
演示 - 测试版 (3)
查看更多 Bootstrap 4.1+ 订购演示
相关
Bootstrap 4 中的列排序使用 push/拉取和 col-md-12
Bootstrap 4 更改列顺序
A-C-B A-B-C
I have 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 output:
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.
解决方案
2021 - Bootstrap 5
The responsive ordering classes are now order-first, order-last and order-0 - order-5
Demo
2018 - Bootstrap 4
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](http://www.codeply.com/go/OmrcmepbUp) (This only works pre 4.0 beta)
Bootstrap 4.1+
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>
Demo: Change order using order-* classes
Desktop (larger screens):
Mobile (smaller screens):
It's also possible to change column order using the flexbox direction utils...
<div class="container">
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-8">
2
</div>
<div class="col-md-4">
1st on mobile
</div>
</div>
</div>
Demo: Bootstrap 4.1 Change Order with Flexbox Direction
Older version demos
demo - alpha 6
demo - beta (3)
See more Bootstrap 4.1+ ordering demos
Related
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns
A-C-B A-B-C
这篇关于通过 Bootstrap4 对列进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
