¡Hola Estudiante, espero que estés bien!
Parece que estás explorando el uso de Media Queries para hacer que tu diseño web sea responsivo. Las Media Queries son una herramienta poderosa para aplicar estilos CSS dependiendo de las características del dispositivo, como el ancho y la altura de la pantalla.
Por lo que describes, estás intentando cambiar el diseño de una página cuando el ancho de la pantalla es menor a 1200 píxeles. Para lograr esto, puedes usar la propiedad max-width dentro de una Media Query. Aquí tienes un ejemplo básico de cómo podrías estructurarlo:
@media (max-width: 1200px) {
.presentacion {
display: flex;
flex-direction: column-reverse;
}
}
En este ejemplo, cuando el ancho de la pantalla es de 1200 píxeles o menos, el contenedor con la clase .presentacion cambiará su dirección de flexión a column-reverse, lo que hará que la imagen aparezca antes que los otros elementos en la columna.
Recuerda que puedes ajustar otros estilos dentro de la Media Query para adaptar completamente el diseño a pantallas más pequeñas. Experimenta cambiando el tamaño de la pantalla en tu navegador para ver cómo se aplican los cambios.
Espero que esto te sea útil y que puedas implementar los cambios deseados en tu proyecto. ¡Espero haber ayudado y buenos estudios!
