On a desktop view, 2 cards are displayed in a row. I would like them to also appear in a row on mobile view. I tried using col-sm-4 but it's not working. How can I get the cards to display in a row on mobile view so that I can see both the product photo and details without scrolling?
<div class="col-md-9 col-sm-12">
<div id="product_details_info">
<div class="container-fluid">
<h3 class="h2-title">Product Details</h3>
<div class="row">
<div class="col-md-6 col-sm-4 py-2">
<div class="card h-100 card-body border-0 shadow">
<img class="shadow d-block w-100" style="object-fit: none;height:450px;" src="{{asset('img/electrical.jpg')}}" alt="First slide">
</div>
</div>
<div class="col-md-6 col-sm-4 py-3" id="order_now_section">
<div class="card h-100 border-0 shadow">
<div class="card-body" style="text-align:center;">
<h3 class="product-title" style="font-family: 'Piedra', cursive;font-size:35px;text-align:center">men's shoes fashion</h3>
<h5 class="quantity" style="font-family: 'Sriracha', cursive;">quantity</h5>
<input type="number" class="form-control form-control-sm form-control-warning" style="width: 50%;margin:auto;text-align:center;" min="0">
<h5 class="" style="font-family: 'Sriracha', cursive; padding-top:20px;">price</h5>
<h5 class="" style="font-family: 'Sriracha', cursive;padding-bottom:10px; font-weight:bold;font-size:20px;">100 BDT</h5>
<div class="action">
<a href="{{URL::to('/products/product_details')}}" type="button" class="btn btn-outline-info" style="font-weight:bold;"><i class="fas fa-cart-plus"></i>  Order Now </a>
<a href="{{URL::to('/products/product_details')}}" type="button" id="heart_id" class="btn btn-outline-info" style="font-weight:bold;"><span class="fa fa-heart"></span> </a>
<h3 class="product-title" style="font-family: 'Piedra', cursive;font-size:20px;padding-top:20px;text-align:center">Product Details</h3>
<p class="product-description" style="font-family: 'Raleway', sans-serif;">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>