Possuo uma section
em meu site que no desktop apresenta o comportamento esperado, uma row
divida em 3, utilizando col-md-4
, no desktop o comportamento está normal, no mobile tentei utilizar col-xs-4
para ficar divido corretamente, porém o resultado não foi o esperado.
É para ter esse mesmo comportamento no mobile, porém ele esta quebrando um abaixo do outro.
HTML
<section class="third-section">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 d-flex justify-content-start">
<h4>Entre em contato com a gente:</h4>
</div>
<div class="col-md-4 col-xs-4 phone">
<div class="d-flex align-items-center resd">
<p> 51 9999999</p>
</div>
<div class="d-flex align-items-center"><img src="img/iconwpp.png" alt="icone whatsapp">
<p>51 99999999</p>
</div>
<div class="d-flex align-items-center"><img src="img/iconwpp.png" alt="icone whatsapp">
<p>51 99999999</p>
</div>
</div>
<div class="col-md-4 col-xs-4 address">
<p>Rua XXXXX</p>
<p>xxxxxxxxxxxxx/RS</p>
<p>CEP 00000-000</p>
</div>
</div>
</div>
CSS
.third-section {
margin-top: 5%;
margin-bottom: 5%;
padding-left: 35%;
padding-right: 30%;
.phone {
img {
margin-right: 3px;
margin-bottom: 20px;
height: 20px;
}
.resd {
margin-left: 23px;
}
}