I'm facing a challenge with my code where I want to display two containers side by side on mobile, like this:
https://i.sstatic.net/DslMK.png
However, instead of the desired output, both containers are appearing stacked on top of each other:
https://i.sstatic.net/bOkVa.png
Even though I have used col-sm-6 as the div class for each container. Here's the code snippet:
<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>
Can anyone provide some guidance on how I can achieve the desired layout?