Html 如何在BS中环绕图像放置文本在移动设备上的图像下

我有一些文字是围绕着一个图像。在移动设备上时，无需使用媒体查询即可将文本置于图像下方。（仅限引导类？）

小猫

乱数假文。。。。。。

---

这里是我创建的一个提琴：

在这个实例中，您可以使用BS实用程序类

在

元素上使用

float sm left

。根据需要进行调整

请参阅此处的文档

小猫

乱数假文。。。。。。

这是你的最新消息

另外，为了获得您想要的样式，只需使用两个额外的BS类

见更新

<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-body">

        <!-- image -->
        <figure class="figure float-left mr-3">
          <img class="img-fluid rounded-circle mt-3 mx-auto d-block" src="http://placekitten.com/g/200/200" />
          <figcaption>
            <h4 class="text-center mt-3">Kitten</h4>
          </figcaption>
        </figure>
        <!-- text -->
        <p>
          Lorem Ipsum ......
        </p>

      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-body">

        <!-- image -->
        <figure class="figure float-sm-left mr-3">
          <img class="img-fluid rounded-circle mt-3 mx-auto d-block" src="http://placekitten.com/g/200/200" />
          <figcaption>
            <h4 class="text-center mt-3">Kitten</h4>
          </figcaption>
        </figure>
        <!-- text -->
        <p>
          Lorem Ipsum ......
        </p>

      </div>
    </div>
  </div>
</div>