Нестандартая адаптивная разметка с всплываюшими товарами

День добрый, прощу хелпа как сделать такой функционал адаптивным (желательно только css grid flex). Всё идёт в одном блоке друг за другом.

<div class="row">
    <div class="col">Блок</div>

    <div class="col-xl-6 col-12">Блок</div>
    <div class="col-xl-6 col-12">Блок</div>

    <div class="col-xl-3 col-md-6 col-12">Блок</div>
    <div class="col-xl-6 col-md-6 col-12">Блок</div>
    <div class="col-xl-3 col-md-6 col-12">Блок</div>

    <div class="col-xl-6 col-md-6 col-12">Блок</div>
    <div class="col-xl-3 col-md-6 col-12">Блок</div>
    <div class="col-xl-3 col-md-6 col-12">Блок</div>
</div>

Задача - сделать под каждой "линией" доп блок с описанием (открывается при клике на "Блок") и он должен быть адаптивным, если на 768px то он должен появляться под своей линией из 2х элементов. Что бы в адаптиве, карусель была под своей линией.