Html 用侧面图像排列boostrap 4上的内容

我想要这种款式：

我使用了col-md-6和float-left作为图像，并以某种方式实现了效果，但如果有更多的文本，文本将位于图像下方，我不希望这样，我希望图像保持左上方，文本不应位于下方

第二个问题是在mobile view上，我希望看起来像这样（查看第二张图片）

我认为flexbox应该有一些技巧？ 我用这个做证明，如果你还有其他选择，请分享：）

乐：

<div class="container">
    <div class="row">
    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    </div>
    <Br> <br> 
    <div class="row">
    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    </div>
  </div>

H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。她自己也不是那么可爱。他为什么现在无力地期待未来。
c

H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。她自己也不是那么可爱。他为什么现在无力地期待未来。
c




H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。她自己也不是那么可爱。他为什么现在无力地期待未来。
c

H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。她自己也不是那么可爱。他为什么现在无力地期待未来。
c

你离它不远了。您可以收集单行中的列，并对列应用flex。这是一个开始

@介质（最小宽度：767px）{
.文本中心{
文本对齐：左对齐；
}
.flex{
显示器：flex；
边缘底部：24px；
}
.flex>div{
左边距：20px；
右边距：20px；
}
}

H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。
她自己也不是那么可爱。他为什么现在无力地期待未来。C

H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。
她自己也不是那么可爱。他为什么现在无力地期待未来。C

H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。
她自己也不是那么可爱。他为什么现在无力地期待未来。C

H3大标题
对鲁莽先生的篡改或同情。当然，费拉尔的主题是喜欢的或乏味的小屋。使人愉快，使人愉快。接下来的很长一段时间没有给mr眼睛。他庆祝钢琴演奏会时毫无保留。
她自己也不是那么可爱。他为什么现在无力地期待未来。C

请分享您迄今为止尝试过的内容。i；我编辑了这篇博文，这正是我需要的，但是对于Bootstrap 4。。