引导程序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演示

Answer 1

尽管文档中没有明确说明，但订单类似乎只适用于同一父行中的同级列。您可以利用第一列上的CCD_；DIV2"&quot；DIV3"；手机上的最后一个。

为了满足您重新订购"；DIV1"；到另一列中，您将需要有两个"的实例；DIV1"；使用不同的显示类(.d-none.d-md-block和.d-md-none)来切换可见性。

这是我要示范的你的小提琴叉。