Question

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

这是我的正常网格：

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

这样的XS屏幕可能吗？

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

示例代码here

如果不能在不同容器之间重新排序，我该如何通过javascript进行此操作？

Answer 1

Bootstrap flex修复。如果您将.menu移动到上面的容器并添加order属性，则可以使用bootstrap实现结果

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

不同容器之间的Bootsrap 4 beta柱排序

1 个答案: