Tenho um informativo de contato:
Tenho o HTML
<div class="container-fluid" id="containercontato">
<div class="row">
<div class="col">
<h4 style="text-align:center;">Contato</h4>
<p style="text-align:center;">(27) 3267-1144</p>
</div>
</div>
<div class="container" id="containercontatosetor">
<div class="row">
<div class="col-sm" id="coluna1">
<h5 style="text-align:center;">Vendas</h5>
<p><strong>Ramal:</strong> 222 - 219 - 229 - 225<p>
<p><strong>E-mail:</strong> vendas@frigorificoforteboi.com.br</p>
</div>
<div class="col-sm" id="coluna2">
<h5 style="text-align:center;">Compras</h5>
<p><strong>Ramal:</strong> 230<p>
<p><strong>E-mail:</strong> compras@frigorificoforteboi.com.br</p>
</div>
<div class="col-sm" id="coluna3">
<h5 style="text-align:center;">Financeiro</h5>
<p><strong>Ramal:</strong> 214<p>
<p><strong>E-mail:</strong> financeiro@frigorificoforteboi.com.br</p>
</div>
</div>
</div>
CSS:
#containercontato{
margin-top: 50px;
}
#containercontato p{
margin-top: 5px;
font-size: 1.3em;
}
/contato/
#coluna1{
border-right: 3px solid #27ae60;
width: 100px;
}
#coluna1 p{
font-size: 1em;
}
#coluna2{
border-right: 3px solid #27ae60;
width: 100px;
}
#coluna2 p{
font-size: 1em;
}
#coluna3{
width: 100px;
}
#coluna3 p{
font-size: 1em;
}
#containercontatosetor{
margin-top: 50px;
}
Quando coloco em um tamanho de celular:
como faço para ficar um debaixo do outro?
