响应式自举行跨距重排序

Question

使用Bootstrap 4可以出发

|   | b |   |
| a |---| c |
|   | d |   |

on xs to

|         | a |
|         |---|
|    b    | c |
|         |---|
|         | d |

在短信上吗？

浏览过flex文档之后，如果不隐藏和显示重复的布局元素，就找不到找到两者的方法。

<div class="container pl-0 pr-0">
    <div class="row no-gutters">
        <div class="col-2 categories">
            a
        </div>
        <div class="col-8">
            <div class="mainPanel">
                b
            </div>
            <div class="colors">
                d
            </div>
            <div class="item"><< Select Item >></div>
        </div>
        <div class="col-2 patterns">
            c
        </div>
    </div>
</div>

这将构建第一个示例，但是将b和d嵌套在另一个div中意味着无法根据需要对它们进行重新排序。