如果调整为较小的引导网格，则删除文本

Question

美好的一天，如果浏览器最小化或从移动设备查看，我试图调整图像中的文字。我的目标是最后一张图片将仅显示“套准”，而其他单词如果更小则看起来更简单。同样，hvrbox是动画的css和javascript。

<div class="container">
  <div class="row">
      <div class="col-md-12 text-align-center">
        <h2 class="bold_font">LEARN MORE</h2><br>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=health">
        <div class="hvrbox">
            <img src="img/_stock_mwc_beauty.jpg" class="img-responsive hvrbox-layer_bottom">
            <div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slidedown">
            <div class="hvrbox-text">
              <img src="img/icon-beauty-white.png" class="img-responsive">
              <h2>BEAUTY</h2>
            </div>
            </div>
        </div>
        </a>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=beauty">
        <div class="hvrbox">
            <img src="img/_stock_mwc_health.jpg" class="img-responsive hvrbox-layer_bottom">
            <div class="hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slidedown">
            <div class="hvrbox-text">
              <img src="img/icon-health-white.png" class="img-responsive">
              <h2>HEALTH</h2>
            </div>
            </div>
        </div>
        </a>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=wellness">
        <div class="hvrbox">
            <img src="img/_stock_mwc_wellness.jpg" class="img-responsive hvrbox-layer_bottom">
            <div class="hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slidedown">
                <div class="hvrbox-text">
              <img src="img/icon-wellness-white.png" class="img-responsive">
              <h2>WELLNESS</h2>
            </div>
            </div>
        </div>
       </a>
      </div>
  </div>
</div>