有没有一种方法可以使用Bootstrap排序来更改元素在不同断点处的列？

Question

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

目前，我正在使用一些类似的东西（我们可以假设这里的所有元素都具有适当的高度）：

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

但是这样做似乎有点hack。有谁知道有没有一种纯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>