[SOLUCIONADO] Desplazamiento de la imagen a la parte posterior

[mblascog]

Buenas,

Tengo un texto y una imagen a la derecha. Como el texto ocupa más de alto que la imagen, llega un momento que el texto pasa por debajo de la imagen.
Es decir,



Me gustaría que al redimensionar el navegador, al llegar a cierto ancho, la imagen pasara a la parte inferior y el texto ocupara todo el ancho, así:



Si no fuese por el texto que aparece en la parte inferior de la imagen, podrían ser dos div's y ningún problema, pero de esta forma, no sé como debo estructurarlo.

Alguna idea? Gracias

[fede5426]

Para que el texto rodee la imagen, la estructura debe ser asi:

Código HTML:

<div>
   <img src="" />
   <p></p>
</div>
 

Es decir, el párrafo por debajo de la imagen y la imagen con float:right.

Para cambiar los atributos según el ancho de la ventana, tenés que hacerlo con media queries. Al llegar a determinada resolucion de pantalla, que la imagen ya no flote, que se comporte como bloque y que ocupe el 100% del ancho.

Pero acá aparece el problema, si en la estructura tu imagen está sobre el párrafo, difícil que la puedas colocar debajo.

Te dejo un ejemplo de cómo hacerlo, pero con la imagen siempre sobre el texto:

http://codepen.io/fede5426/pen/oXGvrj

Saludos

[mblascog]

Gracias fede5426 por tu respuesta.
Lo estoy probando, pero no me sale. A mi cliente no le interesa que la foto salga nunca arriba, la quiere a la derecha o abajo.
Además, para simplicar puse que se trataba de una imagen, pero en realidad es un carousel,
Aunque sé que no es muy correcto, ahora intentaba que habieran dos carrouseles iguales en la web, uno a la derecha y el otro a la parte inferior. Por media queries visualizar uno y ocultar el otro. Sé que no es correcto y no me convence.
Alguna alternativa al respecto?

Gracias

[mbm150]

Hola,

prueba con este código:

Código CSS:

#container{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    overflow: hidden;
}
#container img{
    order: 2;
    display: block;
    width: 100%;
}
#container p{
    order: 1;
    display: block;
    width: 100%;
}
@media only screen and (min-width:679px){
#container{
    display: block;
}
#container img{
    width: 250px;
    float: right;
}
#container p{
    display: block;
    width: 100%;
}
}
 

Aquí esta en funcionamiento: https://jsfiddle.net/mbm150/v1daa37h/

Saludos.

[mblascog]

Justo lo que necesito mbm150. Muchísimas gracias