Estoy tratando de ubicar correctamente mis div para vista desde dispositivo móvil, actualmente puedo ubicar mis divs correctamente en vista desktop sin ningún problema, anexo ejemplo de cómo se visualizan en vista desktop.
Para la vista movil quisiera que los elementos se ubicaran de la siguiente manera:
El código que he usado para construir los divs es el siguiente:
.CeroPadCeroMar {
padding: 0px;
margin: 0px;
}
.texto-encimaAnalisis {
position: absolute;
top: 10%;
left: 8%;
}
.TextoAnalisis {
font-family: 'Lettera Text Std';
font-style: normal;
font-size: 30px;
color: #0F196C;
}
.TextoAnalisisDesc {
font-family: 'Lettera Text Std';
font-style: normal;
font-size: 15px;
color: #616160;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="Industria" class="CeroPadCeroMar">
<div class="col-xs-12 col-lg-12 CeroPadCeroMar">
<img src="../content/image-backgroud.png" class="img-responsive" alt="" width="auto" height="345">
<div class="texto-encimaAnalisis">
<div class="col-md-12 col-xs-12 col-md-12 col-lg-12">
<div class="col-md-12" style="min-height: 199px;">
<div class="row">
<div class="col-md-4" style="padding-right: 107px;">
<p class="TextoAnalisis">
<b style="font-weight: bold;">
Lorem ipsum amet. <br />dolor sit
</b>
</p>
<p class="TextoAnalisisDesc">
<b style="font-weight: bold;">
Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
</b>
</p>
</div>
<div class="col-md-4" style="padding-right: 107px;">
<p class="TextoAnalisis">
<b style="font-weight: bold;">
Lorem ipsum amet. <br />dolor sit
</b>
</p>
<p class="TextoAnalisisDesc">
<b style="font-weight: bold;">
Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
</b>
</p>
</div>
<div class="col-md-4" style="padding-right: 107px;">
<p class="TextoAnalisis">
<b style="font-weight: bold;">
Lorem ipsum amet. <br />dolor sit
</b>
</p>
<p class="TextoAnalisisDesc">
<b style="font-weight: bold;">
Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
</b>
</p>
</div>
</div>
<div class="col-md-4" style="margin-top: 50px; padding-right: 107px;">
<p class="TextoAnalisis">
<b style="font-weight: bold;">
Lorem ipsum amet. <br />dolor sit
</b>
</p>
<p class="TextoAnalisisDesc">
<b style="font-weight: bold;">
Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
</b>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Hay alguna clase o propiedad que pueda usar para que los divs se acomoden como lo deseo en vista móvil?