bootstrap-4 - Bootstrap 4 从不同的行和列更改动态高度卡顺序

Question

我是 Bootstrap 4 的新手，并试图了解订单类是如何工作的。我有这个布局，其中包括

ROW 1:
COL-MD-4 with 3 cards inside
COL-MD-8 with 2 cards inside
ROW 2:
COL-MD-12 with 1 card inside

 ________   ____________________________
|DIV1    | |DIV4                        |
|ROW1    | |ROW1                        |
|COL-MD-4| |COL-MD-8                    |
|CARD    | |CARD                        |
|        |  ----------------------------
|        |  ____________________________
|        | |DIV5                        |
|        | |ROW1                        |
|        | |COL-MD-8                    |
|        | |CARD                        |
 --------  |                            |
 ________  |                            |
|DIV2    | |                            |
|ROW1    | |                            |
|COL-MD-4| |                            |
|CARD    | |                            |
 --------  |                            |
 ________  |                            |
|DIV3    | |                            |
|ROW1    | |                            |
|COL-MD-4| |                            |
|CARD    | |                            |
|        | |                            |
|        | |                            |
 --------   ----------------------------
 _______________________________________
|DIV6                                   |
|ROW2                                   |
|COL-12                                 |
|CARD                                   |
|                                       |
|                                       |
|                                       |
 ---------------------------------------

我正在尝试在移动设备布局上更改 div 的顺序。所有 div 都是 COL-12，但我希望顺序是 DIV4、DIV1、DIV5、DIV6、DIV2、DIV3。在 -MD 大小及以上时，DIV5 应该是 flex:1 以匹配 DIV3 的下限，这就是为什么我为 DIV6 创建了另一行。如果有另一种方法来完成这一切，我很乐意学习如何去做！

谢谢

JSfiddle 演示

标签： bootstrap-4

Answer 1

尽管文档中没有明确说明，订单类似乎仅适用于同一父行中的兄弟列。您可以利用.order-last.order-md-first第一列将“DIV2”和“DIV3”放在移动设备上。

为了满足将“DIV1”重新排序到另一列的限制，您需要使用不同的显示类 ( .d-none.d-md-block& .d-md-none) 拥有两个“DIV1”实例来切换可见性。

这是我的小提琴叉子来演示。