Css 在Bootstrap 4中，将文本包装在图像下的正确方法？

使用Bootstrap 4 alpha 6，我想展示一个证明，包括：

左边：个人照片 右侧：报价、名称和公司徽标左对齐 这是在平板电脑和桌面的宽度。 但是，当窗口宽度缩小时，我希望堆叠集合，以便图像位于文本集合的顶部，并且每个部分都将居中对齐

目前，这是我的代码

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="media">
      <img class="d-flex mr-4 rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      <div class="media-body">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

这成功地在桌面宽度上产生以下结果

然而，当收缩时，安排看起来是这样的

相反，我希望图像在顶部，而不是被包装，最好是居中。下面的文字最好居中

该代码是媒体对象

我还尝试使用两列来完成这项工作-一列宽度为2，另一列宽度为10

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="row">
      <div class="col-md-2 text-center">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>
      <div class="col-md-10 text-center">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

。。。这成功地在移动宽度上产生了正确的结果

。。。然而 a我不确定这个加价是否正确，而且 这意味着文本即使在桌面宽度上也居中，这是不合适的

我对正确的方法感到困惑，我是否/何时应该使用img流体还是固定宽度的图像等。根据浏览器的宽度/断点，是否可以对文本进行不同的对齐

d-flex/mr汽车的东西，我不喜欢。这是从媒体对象的引导4文档代码中复制的

---

方法是什么？

正确的方法是主观的，但您可以使用响应实用程序在不同的断点处更改文本对齐方式。文本md left将使项目在较大屏幕上保持左对齐，然后使用文本中心在较小屏幕上居中

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="row">
      <div class="col-md-2 text-md-left text-center">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>
      <div class="col-md-10 text-md-left text-center">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

---

Re：文本对齐非常好，我在那里学到了一些关于在不同断点处改变对齐方式的知识。只有一件事-当对齐方式在最窄的两个浏览器宽度处正确更改为中心时，在第三个宽度处，右侧第10列内容实际上与左侧第2列中的图像重叠。宽一点就可以了。