Css 三个图像下方有文本，但文本在较小屏幕上的图像旁边重新定位

我知道张贴图片是不被鼓励的，但我真的认为这非常有助于解释我的目的

我有三个图像，我想放置在彼此旁边（蓝色方块），在更大的屏幕上每个（红色方块）下面都有文本。在较小的屏幕上，我希望文本放置在图像旁边，并且图像/文本对垂直堆叠

我猜这最好用引导来完成。我知道如何使用引导网格使图像垂直堆叠在较小的屏幕上，但我不知道如何获得这种组合效果

这是我到目前为止的代码，其中的图像在较大的屏幕上彼此相邻，但在较小的屏幕上垂直堆叠

<div class="container">
    <div class="row">

         <div class="col-md d-flex justify-content-center justify-content-md- 
         start">
             <img src="{% static 'home/img.png' %}" />
         </div>

         <div class="col-md d-flex justify-content-center justify-content-md- 
         start">
             <img src="{% static 'home/img.png' %}" />
         </div>

         <div class="col-md d-flex justify-content-center justify-content-md- 
         start">
             <img src="{% static 'home/img.png' %}" />
         </div>

    </div>
</div>

多谢各位

---

您必须添加

flex md列

，以便通过引导实现这一点

如果屏幕大小高于md断点，文本将位于图像下方，而不是图像旁边。flexbox的默认设置是行，因此在断点下它只使用默认设置，在断点上方它将其转换为列设置

<div class="col-md d-flex flex-md-column justify-content-center">
    <img src="{% static 'home/img.png' %}" />
</div>

来源：

使用