I have a contact section on my website that contains columns. I used col-md-4 as the site is divided into 12 columns, but on mobile devices, they stack on top of each other.
How are you today?
https://i.sstatic.net/CdKAI.png
And I'm trying to keep it this way.
https://i.sstatic.net/hhqiC.png
HTML
<section class="third-section">
<div class="container">
<div class="row">
<div class="col-md-4 d-flex justify-content-start">
<h4>Get in touch with us:</h4>
</div>
<div class="col-md-4 phone">
<div class="d-flex align-items-center resd">
<p> 51 99999999</p>
</div>
<div class="d-flex align-items-center"><img src="img/iconwpp.png" alt="whatsapp icon">
<p>51 999999999</p>
</div>
<div class="d-flex align-items-center"><img src="img/iconwpp.png" alt="whatsapp icon">
<p>51 999999999</p>
</div>
</div>
<div class="col-md-4 address">
<p>Street XXXXX</p>
<p>XXXXXXXX/RS</p>
<p>ZIP code xxxx-xxx</p>
</div>
</div>
</div>
CSS
.third-section{
margin-top: 10%;
margin-bottom: 5%;
padding-left: 35%;
padding-right: 30%;
.phone{
img{
margin-right: 3px;
margin-bottom: 20px;
height: 20px;
}
.resd{
margin-left: 23px;
}
}
h4{
font-size: 1.6em;
color: #77D3C2;
}
p{
font-size: 1.2em;
line-height: 1em;
color: #999999
}
}