html - 并排对齐元素 - 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 类。

超小型设备电话 (<768px)