Занять свободное пространство в bootstrap

Не понятно что внутри себя скрывают компоненты device-types-component и android-client-update-channels-component, но на первый взгляд кажется, что достаточно будет им обоим добавить класс «col», либо обернуть каждый компонент в div с классом «col» и выставить им самим height: 100%

col не подходит, потому что я хочу, чтобы когда ширины браузеры не хватает, блоки располагались друг над другом вот так. Только чтобы у них ширина была одинаковая, максимальная по ширине всего свободного пространства.

Когда они располагаются горизонтально, я хочу что было вот так.

Внутри карты, не думаю что это принципиально:

<div class="card shadow">
    <div class="card-header py-2 d-flex flex-row align-items-center justify-content-between">
        ...
    </div>
    <div class="card-body">
        ...
    </div>
</div>

чтобы когда ширины браузеры не хватает

То есть у обоих блоков фиксированная минимальная ширина? Тогда наверное можно обернуть их во флекс-контейнер и сделать блокам flex-grow: 1, как-то так:

<div class="d-flex flex-wrap">
    <device-types-component class="h-auto mb-4 mr-4" style="flex: 1 1 auto;" />
    <android-client-update-channels-component class="h-auto mb-4 w-auto" style="flex: 1 1 auto;" />
</div>

Это той, что нужно! https://imgur.com/k9D4k9H https://imgur.com/ou6sU08

Спасибо большое. А не подскажите как проделать то же самое с высотой? Никак не могу добиться того, чтобы row занимал всю доступную высоту, как и его корневые потомки.