Quisiera cambiar el orden de mis div
al momento de pasar a mi vista Mobile, los div en mi vista Desktop se ubica uno al lado del otro, pero al momento de pasarlos a Mobile se ve uno debajo del otro pero en este caso quiero que el div
de abajo se ubique arriba, el código que construye los div
lo tengo de la siguiente manera:
@media only screen and (max-width: 550px) {
.row {
width: 100%;
margin-top: 15px;
}
.CeroPadCeroMar {
padding: 0px;
margin: 0px;
}
.TituloRow {
text-align: left;
padding-top: 0px;
}
.CeroPadCeroSust {
padding-left: 10px !important;
margin: 0px;
}
.Segmentos {
padding: 15px;
padding-top: 0px;
}
}
<div class="row" style="width:100%;margin-top:15px;">
<div class="col-md-6 CeroPadCeroMar" style="min-height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</div>
<div class="col-md-6 TituloRow CeroPadCeroSust">
<h2 class="Segmentos">
"Titulo"
<br>
</h2>
<p class="Texto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</p>
</div>
</div>
El div que quisiera ubicar arriba del otro es el que se llama TituloRow
, quiero decir el que contiene el titulo, para controlar la manera en que se ve en Mobile utilizo @media query
, estoy ayudandome con la versión de Bootstrap 3.3.7
Actualización:
Explicando un poco mas a detalle lo que estoy buscando hacer con los div agrego algunas imágenes de como se va actualmente en Desktop y Mobile.
Y a lo que quiero llegar con solo la vista Mobile es lo siguiente:
Si se fijan en los dos últimos div pase el que contiene el texto a la parte superior y el de la imagen abajo. En el código agregue solo los dos últimos div que son los que me interesa manipular.