Есть ли способ использовать порядок Bootstrap для изменения столбца, в котором находится элемент в другой точке останова?

Question

Я пытаюсь выполнить sh следующий эффект, используя 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>

но делать это кажется чем-то вроде взлома. Кто-нибудь знает, есть ли чистый - CSS способ выполнить sh это?

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>