Estoy usando un UI KIT basado en Bootstrap 4 (v4.5), a mi index le agregué un card-group de 3 cards que en la PC se mira bien, sin embargo no logro que se vean igual en Mobile.
Busco que esas 3 cards se vean juntas horizontalmente desde un smartphone y no individualmente de forma vertical como se mira en la imagen.
Ya probé agregando un col-sm de manera individual a cada card y removiendo el card-group pero no funcionó. Y también revisé en un dispositivo real
Mi código:
<link href="https://demos.creative-tim.com/material-kit-bs4/assets/css/material-kit.min.css" rel="stylesheet"/>
<body>
<div class="container">
<h2 class="title text-center text-white"><img src="img/dg.png" alt="ejemplo" width=60 height=60> Ejemplo</h2>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group">
<div class="card card-nav-tabs text-center">
<div class="card-header card-header-primary">1</div>
<div class="card-body">
<input type="text" class="form-control" value="Rnd" placeholder="Rnd">
</div>
</div>
<div class="card card-nav-tabs text-center">
<div class="card-header card-header-primary">2</div>
<div class="card-body">
<select name="mes" class="form-control">
<option value="rnd">Rnd</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
</div>
<div class="card card-nav-tabs text-center">
<div class="card-header card-header-primary">3</div>
<div class="card-body">
<select name="anio" class="form-control">
<option value="rnd">Rnd</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Screenshots:
Mobile (Simulador de Chrome)