Css 引导3列，带图像和；文本响应

下面的代码显示3列，每列都有一个图像和文本，可以在较小的屏幕上向下调整大小，最后在智能手机上调整为1列。有两个问题：1/在最小的屏幕上，图像太大，2/文本在图像下面（就像在大屏幕上），但我希望它在图像的侧面（最小屏幕的一半大小）

我看了很多例子，但我找不到简单的东西

如何使用引导轻松实现这一点

<div class="container BSC_Angel">
  <div class="row">
    <div class="col-md-12 text-center">
      <div class="col-sm-4 text-center" style="">
        <div>image 1</div>
        <div>text 1</div>
      </div>
      <div class="col-sm-4 text-center" style="">
        <div>image 2</div>
        <div>text 2</div>
      </div>
      <div class="col-sm-4 text-center" style="">
        <div>image 3</div>
        <div>text 3</div>
      </div>
    </div>
  </div>
</div>

图1
文本1
图2
文本2
图3
文本3

您可以使用CSS Flexbox

看看这个

或者查看下面的代码片段（

使用全屏正确查看此代码片段）

：

.content holder{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
利润率：20px0；
}
/*在手机上（屏幕宽度谢谢，但在这种情况下，即使在大屏幕上，文本也始终位于图像的右侧。我想实现的是这一点，但仅在最小的屏幕上。@PaulGodard您需要使用媒体查询来实现这一点。我已经更新了我的答案和代码笔，请查看它们并让我知道这是否有效？太好了！我刚刚完成了。）添加了.img div{max width:50%；}用于移动…谢谢@SauravRastogi