Как можно заполнить рамки для выравнивания текста по горизонтали, используя Bootstrap 4?

Question

У меня есть следующий код:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border border-success">
  <div class="cols-12 col-sm-6 col-lg-4" class="border border-info">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et. In commodo nunc sed nibh consectetur sagittis. Donec sit amet sapien nec est
      tempor egestas in vel augue. Proin sodales, tortor eu mollis cursus, eros ante consequat ex, et condimentum
      massa mauris et sem.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4" class="border border-info">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4" class="border border-info">
    <header class="h4 border border-primary">
      Some really long text which is probably gonna take more than one or two lines
    </header>
    <div class="border border-danger">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et.
    </div>
  </div>
</div>

И я хочу добиться следующего результата:

Я пробовал следующее без успеха:

Использование отдельных строк для заголовка и содержимого, однако это портит макет при переходе в мобильное представление.

Использование <br> для создания пустой строки не дает work.

Использование класса "order", поставляемого с Bootstrap, однако, похоже, это не сработало при желании смешивать и сопоставлять порядок строк между различными строками на мобильном телефоне.

Answer 1

вам нужен другой уровень гибкости.

вы можете использовать класс d-flex и flex-colum n для каждого столбца (.col-X), а затем использовать класс flex-grow-1 для border-danger div .

до c: https://getbootstrap.com/docs/4.1/utilities/flex/#grow и сжатие

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border border-success">
  <div class="cols-12 col-sm-6 col-lg-4  d-flex flex-column">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger  flex-grow-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et. In commodo nunc sed nibh consectetur sagittis. Donec sit amet sapien nec est
      tempor egestas in vel augue. Proin sodales, tortor eu mollis cursus, eros ante consequat ex, et condimentum
      massa mauris et sem.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4  d-flex flex-column ">
    <header class="h4 border border-primary">
      Some header text
    </header>
    <div class="border border-danger flex-grow-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim.
    </div>
  </div>
  <div class="cols-12 col-sm-6 col-lg-4  d-flex flex-column">
    <header class="h4 border border-primary">
      Some really long text which is probably gonna take more than one or two lines
    </header>
    <div class="border border-danger  flex-grow-1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat vitae lacus eget pretium. Donec vel
      mauris lorem. Vivamus massa enim, lacinia et lorem vel, porta viverra orci. Maecenas sagittis feugiat lectus,
      ac imperdiet urna fringilla et.
    </div>
  </div>
</div>

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Но для сопоставления полей заголовка и содержимого в каждом контейнере потребуется макет сетки, flex не может этого сделать, только для заполнения всего доступного пространства.