Как выровнять элементы группы списков?

Question

Я пытаюсь создать макет следующим образом:

Большие экраны:

A1 B1      C1
-------------
A2 B2      C2

Маленькие экраны:

A1  C1
B1
------
A2  C2
B2

(A, B, C) вместе представляют собой один элемент списка группы.A должен быть полностью влево, C - вправо на той же высоте, что и A, и B - рядом с A, если есть место, еще ниже.

Я пробовал выравнивание, используя align-topи используя контейнер, но я не смог заставить его работать.

Это мой текущий подход https://jsfiddle.net/keineahnung/wafkj29b/,, но он не совсем работает так, как я хочу.

При разрыве A / B, C немного опускается, он не остается на той же высоте, что и A.

Answer 1

Вы можете использовать столбцы сетки в каждом элементе списка. Таким образом вы позиционируете и заказываете товары по желанию.

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    <div class="row no-gutters w-100">
        <div class="col-auto pr-3">12:00 - 13:00</div>
        <div class="col-md order-last order-md-0">
            <span class="text-nowrap">
                <span class="badge-pill badge-primary text-nowrap">Tag 1</span> <span class="badge-pill badge-primary ml-2 text-nowrap">Tag 2</span>
            </span>
        </div>
        <div class="col-auto ml-auto">01:00</div>
    </div>
 </a>

https://www.codeply.com/go/rjTIU6ON98