Customer Section's images stacked vertically on mobile screens bootstrap 5 - html

Question

I am trying to design my company's website. But all images in the customer section are stacked vertically on mobile devices. I am using Bootstrap 5.2. I have tried col-xs and col-md classes but was not able to achieve the output. I am attaching the code and image. Thanks For the Help.
/*
===========================================
Customer Section
===========================================
*/
.dot {
height: 20px;
width: 20px;
background-color: #3736b0;
border-radius: 50%;
display: block;
position: absolute;
top: 105rem;
left: 50%;
}
.section-4-title {
display: block;
position: absolute;
top: 108rem;
}
.section-4 {
margin-top: 3rem;
}
.card {
overflow: hidden;
height: 4rem;
width: 7rem;
border: none;
margin-top: 3rem;
margin-bottom: 1rem;
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.2);
}
.card img {
height: 100%;
width: 100%;
}
.card-3 {
overflow: hidden;
height: 4rem;
width: 8rem;
border: none;
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.2);
}
<!--
===========================================
Customer Logo Section
===========================================
-->
<div class="container">
<section class="section-4">
<div class="container text-center">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="dot"></div>
</div>
</div>
<div class="row">
<h2 class="section-4-title">
Simplifying communications for Industry
<div class="title-highlighter">Leaders in India and World</div>
</h2>
</div>
<div class="container">
<!-- Customer Row 1 -->
<div class="row bg-primary">
<div class="bg-dark col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-1.svg" class="img-fluid" alt="Logo 1" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-2.svg" class="img-fluid" alt="Logo 2" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card card-3">
<img src="svgs/logo-3.svg" alt="Logo 3" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-4.svg" alt="Logo 4" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-5.svg" alt="Logo 5" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-6.svg" alt="Logo 6" />
</div>
</div>
</div>
<!-- Customer Row 2 -->
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-7.svg"
class="card-img-top"
alt="Logo 7"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-8.svg"
class="card-img-top"
alt="Logo 8"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-3">
<img
src="svgs/logo-9.svg"
class="card-img-top"
alt="Logo 9"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-10 py-2">
<img
src="svgs/logo-10.svg"
class="card-img-top"
alt="Logo 10"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-3">
<img
src="svgs/logo-11.svg"
class="card-img-top"
alt="Logo 11"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-12.svg"
class="card-img-top"
alt="Logo 12"
/>
</div>
</div>
</div>
</div>
</div>
</section>
</div>