Align elements side by side - Bootstrap 4 col-sm-6 not applying - html

Question

In the following code I wish to display to containers side by side in mobile like so:
However the output I am receiving is both containers stacked on top of each other:
Despite having col-sm-6 as the div class that wraps each container. Below is my code
<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>
Any advice on how to achieve my objective?

Answer 1

You need col-xs-6 class for mobiles screen sizes.
Extra small devices
Phones (<768px)