并排对齐元素 - Bootstrap 4 col-sm-6不应用

Question

在下面的代码中，我希望在移动设备中并排显示容器，如下所示：

然而，我收到的输出是两个堆叠在彼此之上的容器：

尽管将col-sm-6作为包装每个容器的div类。以下是我的代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
      <div class="text-center mx-auto our-scope-card mb-5">
        <div class="col mt-5 mb-3">
          <h1>CSS Align</h1>
        </div>
        <div class="row pt-4 justify-content-center">
          <div class="col col-lg-8 col-10">
            <div class="row">
              <div class="col-xs-6 col-sm-6 col-lg-4 col-md-6 col-12 pb-5 pt-5">
                <div class="mb-5 mt-3">
                  <img src="http://via.placeholder.com/140x100" alt="Dev" />
                </div>
                <p class="font-weight-bold">Application development</p>
                <p>For businesses of all sizes and industries, we can custom design an application to fit your needs.</p>
              </div>
              <div class="col-xs-6 col-sm-6 col-lg-4 col-md-6 col-12 pb-5 pt-5">
                <div class="mb-5">
                  <img src="http://via.placeholder.com/140x100" alt="Mobile Apps" />
                </div>
                <p class="font-weight-bold">
                  Mobile applications
                </p>
                <p>Whether iOS or Android, we focus on including features that will bring you ROI and differentiate your platform.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      

关于如何实现目标的任何建议？

Answer 1

您需要col-xs-6类用于手机屏幕尺寸。

超小型设备 电话（＆lt; 768px）