有没有办法使用Bootstrap排序来更改元素在不同断点中的列？

Question

我正在尝试使用Bootstrap order类来实现以下效果：

​

目前我使用的是类似的东西(我们可以假设这里的所有元素都有合适的高度)：

<div class="row">
    <div class="col-3 order-lg-1 order-md-8">First element</div>
    <div class="col-6 order-6">Second element</div>
    <div class="col-3 order-lg-1 order-md-7">Last element</div>
</div>

当显示器很大时，所有元素都应该排成一行，如上所述。当它变小时，我希望第一个和最后一个元素连接到一列中。

如果我将第一个和最后一个元素连接到一个元素中，这种结构显然是可能的：

<div class="row justify-content-around">
    <div class="col-6">Second element</div>
    <div class="col-3">
        <div>Last element</div>
        <div>First element</div>
    </div>
</div>

但是，大屏幕的预期行为将不起作用。

另一种选择是复制第一个元素，并根据如下断点隐藏和显示其自身：

<div class="row justify-content-around">
    <div class="col-3 d-none d-lg-block">First element</div>
    <div class="col-6">Second element</div>
    <div class="col-3">
        <div>Last element</div>
        <div class="d-block d-lg-none">First element</div>
    </div>
</div>

但这样做看起来有点像黑客。有没有人知道有没有一种纯CSS的方式可以做到这一点？

Answer 1

尝尝这个

<div class="row flex-row-reverse flex-md-row">
    <div class="col-6 col-md-3  bg-success order-3 order-md-1">First element</div>
    <div class="col-6 col-md-6 bg-primary order-2" >Second element Second element Second element</div>
    <div class="col-6 col-md-3 bg-warning order-1 order-md-3">Last element</div>
</div>