Я пытаюсь сделать ряд реагирующим так, чтобы мобильные ряды шли вертикально, а не горизонтально, и у меня все еще есть все эти причудливые рамки, кто-нибудь может мне чем-нибудь помочь?
Я уже пытался изменитьколонки вверх, css-flexbox, но я, скорее всего, просто делаю что-то ужасно неправильно.
#caixas {
background-color: #58373791;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
padding-left: 25px;
}
#caixas2 {
background-color: #b6696a91;
padding-top: 5px;
padding-right: 30px;
padding-left: 25px;
padding-bottom: 5px;
}
#border {
border: solid 3px red;
}
<div class='col-lg-12 col-md-12 col-sm-12'>
<div id="border" class="container">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Português</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Portuguese Student</h3>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Internacional</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Internacional Student</h3>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Intercâmbio</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Exchange Student</h3>
</div>
</div>
</div>
</div>
</div>