css - 如何将标题移动到 Bootstrap 4 卡片元素内文本的左侧？

Question

我在 Bootstrap 4 中有一个带有标题和卡片文本的卡片元素，我想将标题移动到非移动屏幕的文本左侧。那怎么可能呢？谢谢!

<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>

Fiddle is here

Answer 1

使用响应式 flexbox 实用程序类。例如 card-body 上的 d-flex flex-md-row flex-column...

    <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