Duda HTML y css

Tengo un diseño que esta dividido de la siguiente forma
https://jsfiddle.net/sergiorpo/w9ekpfg2/
En un lado hay una imagen y en el otro un texto con unos botones.
En el navegador se ve todo bien pero el problema lo tengo al pasarlo a una anchura diferente.
Quiero que cuando sea menos de Xpx los span se ponga uno debajo del otro.

Pero no lo consigo [mamaaaaa] [mamaaaaa] y no se que hacer. En el lado rojo estaría la imagen y en el derecho el texto.
https://jsfiddle.net/u73kx4L1/

Usa la posición solo para cosas concretas. Un botón de un menú lateral fijo, algo en la cabecera fija, un desplegable, un menu contextual.. en fin, algo que va estar fijo ppr si mismo, o respecto a otro elemento, pero para elementos mas normales y contenedor tira mejor de display block/flex.

Luego, si tienes un alto de 100%, eso nunca se va bajar, además que también tiene ancho 50% por lo que siempre va ocupar la mitad de su contenedor.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
1 respuesta