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

Question

У меня есть элемент карточки с заголовком и текстом карточки в Bootstrap 4, и я хочу переместить заголовок влево от текста для экранов, которые не являются мобильными. Как это могло быть сделано? Thnx!

<div class="card flex-row flex-wrap">
  <div class="card-block px-2">
      <div class="card-title border-0">
        <h3>Some title to be set to the left of the text</h3>
      </div>
      <div class="card-text">
        Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
      </div>
  </div>
</div>

Скрипка здесь

Answer 1

Используйте отзывчивые служебные классы flexbox.Например, d-flex flex-md-row flex-column на card-body ...

    <div class="card">
        <div class="card-body d-flex flex-md-row flex-column px-2">
            <div class="card-title border-0">
                <h3>Some title to be set to the left of the text</h3>
            </div>
            <div class="card-text">
                Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
                irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore.
                Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
            </div>
        </div>
    </div>

Демо: https://www.codeply.com/go/gtCUz1cd1y