如何将标题移动到 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>

小提琴来了

Answer 1

使用响应式弹性框实用程序类。例如d-flex flex-md-row flex-columncard-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