0

Deseo que cuando cambie a modo celular xs, la imagen se muestre a la derecha del title. por ejemplo para el titulo quede col-xs-9 y la imagen quede con col-xs-3. Anteriormente hice esta pregunta para boostrap 3, lo cual la solución de ejemplo es la siguiente:

<div class="col-xs-4 col-sm-3 pull-right col-md-12">
   <img src="@Url.Content(rutafoto)" alt="" class="img-responsive" style="max-width:100px;" />
<div>

<header class="col-xs-8 col-sm-9 col-md-12 ">
        <a href="#">
            <h2>Title</h2>
        </a>
</header>

Dando como solución la clase pull-right,

Pero en este caso, para boostrap4, he probado con el float-right y el float-sm-right reemplazando el pull-right, pero no funciona. ¿Como podría solucionarlo?¿Podría haber algun ejemplo?

-------parte nueva editada---

Así como quiero que se vea en pantalla grande o en pc introducir la descripción de la imagen aquí

y así como deseo que se vea en celular:

introducir la descripción de la imagen aquí

---fin parte editada---

Les dejo el link de la pregunta anterior para boostrap 3.

¿Como cambiar la imagen en modo celular o xs en boostrap 3?

1 respuesta 1

1

Tendras una representacion grafica de lo que se busca, te comento pues probando el codigo proporcionado, funciona igual en bootstrap 3 y 4. aunque talves por lo que comentas, te sirva la propiedad order

Documentacion bootstrap4 order

De la siguiente forma:

<div class="row">
  <div class="col-md-12 col-sm-3 order-1 order-md-2">
    Este contenedor se mueve al princpio (izquierda) si es menor a md y al final (derecha) si es md o mayor
  </div>
  <div class="col-md-12 col-sm-9 order-2 order-md-1">
    Este contenedor se mueve al final (derecha) si es menor a md y al principio (izquierda) si es md o mayor
  </div>
</div>

No se si sea el comportamiento que buscas, o si requieres otro, realmente serviria una imagen o diagrama, pero espero que esto sirva


ACTUALIZACION:

Gracias por la informacion, incluyendo la informacion que das, es posible que esta sea tu solucion, suponiendo que usas bootstrap4 y que estan en un row ambos

<div class="row">
    <div class="col-4 col-sm-3 col-md-12 order-2 order-md-1">
       <img src="@Url.Content(rutafoto)" alt="" class="img-responsive" style="max-width:100px;" />
    </div>

    <header class="col-8 col-sm-9 col-md-12 order-1 order-md-2 ">
            <a href="#">
                <h2>Title</h2>
            </a>
    </header>

</div>

Saludos


Muestro fuente en codepen

PRUEBA EN CODEPEN

y adicionalmente en

    <div class="col-4 col-sm-3 col-md-12 order-2 order-md-1">
   <img src="@Url.Content(rutafoto)" alt="" class="img-responsive" style="max-width:100px;" />
<div>

Esta mal cerrado el div

4
  • Hola @Jesus Ramon Rocha Velazquez, gracias por responder, pero la solución que me diste no resultó, pero edite la pregunta y puse en ejemplo de como deseo que se vea la foto.
    – Danilo
    el 13 ago. 2020 a las 22:18
  • tambien especifique mas los col-
    – Danilo
    el 13 ago. 2020 a las 22:32
  • Gracias, ya actualice la respuesta, espero que sea de utilidad, saludos el 13 ago. 2020 a las 23:27
  • Muchas gracias por la respuesta, esa es la solución
    – Danilo
    el 13 ago. 2020 a las 23:40

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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