Estou ajustando a versão mobile de uma página, utilizando o bootstrap eu defini minhas divs com as classes col-md-4 (versão desktop) col-xs-6 (versão mobile). Na versão desktop está funcionando normal com três colunas como preciso, já na versão mobile (de duas colunas) as divs estão sendo sobre postas umas pelas outras.
O código está mais ou menos assim:
.blocos
{
width: 100%;
height: 100%;
.icone
{
margin-top: 20%;
@media screen and (max-width: $smartphone)
{
width: 80px;
display: block;
float: none;
margin-left: auto;
margin-right: auto;
margin-top: 0;
img
{
margin-top: 30%;
}
}
}
.col-xs-6
{
@media screen and (max-width: $smartphone)
{
height: 200px;
margin-top: 0;
margin-bottom: 15px;
top: 0;
}
}
.col-md-4
{
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height: 500px;
margin-top: 30px;
max-width: 425px;
@media screen and (max-width: $smartphone)
{
height: 200px;
}
}
.middle
{
margin-left: 35px;
@media screen and (max-width: $smartphone)
{
margin-left: 0;
}
}
.right
{
float:right;
@media screen and (max-width: $smartphone)
{
float: none;
}
}
<div class="row blocos">
<div class="col-md-4 col-xs-6">
<!--Conteudo.....-->
</div>
<div class="col-md-4 col-xs-6">
<!--Conteudo.....-->
</div>
<div class="col-md-4 col-xs-6">
<!--Conteudo.....-->
</div>
<div class="col-md-4 col-xs-6">
<!--Conteudo.....-->
</div>
</div>