Отзывчивая пользовательская таблица div

Question

Мне пришлось создать таблицу div, потому что я не видел способа сделать это с помощью элемента таблицы начальной загрузки.

Вот изображение:

Вот код:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
      <div class="col-12">
        <p class="text-white"><b>Lorem ipsum</b></p>
      </div>
    </div>
    <div class="row border-left border-right text-center">
      <div class="col-8 pt-3 pb-0 border-right">
        <p>Lorem ipsum</p>
      </div>
      <div class="col-4 pt-3 pb-0">
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="row border text-center">
      <div class="col-10">
        <div class="row">
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
        </div>
        <div class="row border-top">
          <div class="col bg-primary-dark pt-3 pb-0" style="width: 80%; flex-basis: unset;">
            <p class="text-white"><b>Lorem ipsum</b></p>
            <p class="text-white">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            </p>
          </div>
          <div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
        </div>
        <div class="row border-top">
          <div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
          <div class="col bg-info-dark pt-3 pb-0 border-right" style="width: 80%; flex-basis: unset;">
            <p class="text-white"><b>Lorem ipsum</b></p>
            <p class="text-white">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            </p>
          </div>
        </div>
      </div>
      <div class="col-2 pt-3">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        </p>
      </div>
    </div>

Теперь я хочу, чтобы это было отзывчивым.Горизонтальная прокрутка или любой другой способ, любые предложения будут с благодарностью

Answer 1

Класс col в начальной загрузке разделит строку на количество добавленных вами элементов col. Чтобы сделать его адаптивным, укажите ширину элемента для каждого типа экрана, используя такие классы, как col-sm-12 (полная ширина на небольших устройствах),col-md-6 (сетка из двух столбцов для средних экранов) и т. д. Не забывайте, что сначала загрузчик запускается с мобильных устройств.