Bootstrap Col-SM- *不适用于平板电脑

Question

我正在使用Bootstrap V4.1.2框架，并且遇到了col-sm- *类未在平板电脑上应用的情况……这意味着它在平板电脑上不应该使用时崩溃了。请参阅下面的代码。

在此先感谢您提供任何/所有指导！

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-3"> <a href="#"><img src="assets/img/cattle-herdsires.jpg" alt="Herd Sires" class="img-fluid"/></a>
      <p><a href="#" class="btn btn-primary" role="button">Herd Sires</a></p>
    </div>
    <div class="col-sm-6 col-lg-3"> <a href="#"><img src="assets/img/cattle-2yearoldbulls.jpg" alt="2-Year Old Bulls" class="img-fluid"/></a>
      <p><a href="#" class="btn btn-primary" role="button">2-Year Old Bulls</a></p>
    </div>
    <div class="col-sm-6 col-lg-3"> <a href="#"><img src="assets/img/cattle-yearlingbulls.jpg" alt="Yearling Bulls" class="img-fluid"/></a>
      <p><a href="#" class="btn btn-primary" role="button">Yearling Bulls</a></p>
    </div>
    <div class="col-sm-6 col-lg-3"> <a href="#"><img src="assets/img/cattle-females.jpg" alt="Females" class="img-fluid"/></a>
      <p><a href="#" class="btn btn-primary" role="button">Females</a></p>
    </div>
  </div>
</div>