0

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.

introducir la descripción de la imagen aquí

Para la vista movil quisiera que los elementos se ubicaran de la siguiente manera:

introducir la descripción de la imagen aquí

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?

1
  • Si acabas de empezar a usar bootstrap para este proyecto quizás es el momento de cambiar de version... la 3.3.7 es del año de la catapum (25 Jul 2016). Actualmente la última estable es la 5.1.3. Cuando hayas actualizado eso, si sigues con problemas reformula la pregunta o edita esta con el nuevo código. Y si no pretendes actualizarlo porque es un proyecto antiguo o heredado entonces mucha suerte!
    – masterguru
    Commented el 14 jun. 2022 a las 15:37

1 respuesta 1

0

como recomendacion te diria que actualices a la v4.x de bootstrap en vez de usar la v3, ahora para llegar al resultado que deseas es importante que te apoyes en la documentación de esta misma Grid Options

La solucion es usar en la v3 la clase col-xs-6 en tus divs para que en pantallas mas pequeñas tengan un tamaño diferente

<div class="col-xs-6 col-md-4">
  tu contenido
</div>

En versiones mas actuales la documentación cambia v4.x

<div class="col-6 col-sm-4 col-md-4 col-lg-3 mb-3">
  tu contenido
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.