Javascript Bootsrap 4 beta列在不同容器之间排序

首先，我很抱歉我的英语不好

这是我的标准网格：

-------------------------------
|    A    |    B    |    C    |
-------------------------------
|     D (horizontal menu)     |
-------------------------------

像这样的XS屏幕是可能的吗

---------
|A      |
---------
|D menu |
---------
|B      |
---------
|C      |
---------

示例代码

---

如果无法在不同容器之间重新排序，如何通过javascript实现这一点？

Bootstrap

flex

fix。 如果您将

.menu

移动到上面的容器并像这样添加

order

属性，就可以通过引导获得结果

<div class="container-fluid">
    <div class="row d-flex ">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 order-md-1 order-sm-1 order-1" style="height:100px;background-color:#a5a5ff;">A</div>
        <div class="col-xs-12 col-sm-7 col-md-5 col-lg-5 order-md-2 order-sm-3 order-3" style="height:100px;background-color:#fd7a7a;">B</div>
        <div class="col-xs-12 col-sm-5 col-md-3 col-lg-3 order-md-3 order-sm-4  order-4" style="height:100px;background-color:#7cd298;">C</div>
        <div class="col-sm-12 order-md-4 order-sm-2 order-2  menu">D (ul li horizontal menu)</div>
    </div>
</div>

A.
B
C
D（ul li水平菜单）