Cita:
Iniciado por DragonX 
Podes usar boostrap toda tu vida y aprender mucho de css y responsive utilizandolo.
Por otro lado, una forma facil de hacer lo que queres es ponerle a esa img una posicion relativa, un z-index superior a las otras capas y simplemente darle un margen superior negativo, eso es todo!
Slds.-
Lo he probado con esa propiedad pero no lograba lo que pretendía. Al superponerlo habría que estar jugando con paddings en los elementos que se encuentran debajo con el objetivo de desplazar su contenido y que no sea tapado. Además, estos paddings me perjudican a la hora de apilar las columnas en pantallas reducidas. Al final he cambiado el enunciado del problema y modificado el layout.
Dejo el enlace a CodePen por si a alguien le interesa en Bootstrap.
https://codepen.io/JSanchezGal/pen/WNvxQGY?editors=1100
No obstante, ahora prefiero CSS Grid porque me resulta más fácil y comprensible a la hora de desarrollar los layouts. Aunque eso no significa que deje de lado Bootstrap ni mucho menos.
Aquí el CodePen con el código empleando Css Grid:
https://codepen.io/JSanchezGal/pen/ZEGpYZJ?editors=1100
Y ahora la duda es ¿existe alguna propiedad, método o proceder en CSS Grid que me permita que el bloque para el lago sea de ancho y altura fija?
Saludos.