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

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.