Mover Elemento Responsivo

El propósito de este componente es controlar la visibilidad y posición de elementos en diferentes breakpoints. Permite mover un elemento dentro de un contenedor específico en dispositivos móviles mediante clases CSS responsivas.

FRG_MoverElementoResponsivo

Fragmento > Componentes > FRG_MoverElementoResponsivo

Componente wrapper que reordena elementos en el DOM mediante CSS Grid según el breakpoint. Permite mostrar elementos en diferentes posiciones o contenedores dependiendo del dispositivo, facilitando layouts complejos y responsivos sin duplicar contenido.

Casos de uso

Este componente es ideal para:

  • Cambiar la posición de botones de acción en móvil
  • Reordenar llamadas a la acción (CTA) según el dispositivo
  • Mostrar elementos en diferentes áreas del layout dependiendo del breakpoint
  • Optimizar la experiencia móvil sin duplicar código HTML
  • Implementar diseños complejos que requieren reordenamiento responsive

Ejemplo

Para este ejemplo hemos realizado las siguientes acciones:

  • Se han añadido un par de contenedores con diferentes colores de fondo para diferenciar
    • En el primer contenedor se le ha agregado el fragmento "FRG_MoverElementoResponsivo" a su vez dentro de el un parrafo de ejemplo
      • FRG_MoverElementoResponsivo tiene como configuración  Clase de contenedor móvil: contenedor-movil
    • En el segundo (es el contenedor que queremos que se desplace el elemento en móvil) le hemos añadido la clase "contenedor-movil" para que funcione
  • Podemos comprobar si hacemos pequeña nuestra ventana de navegador que el fragemento y los elementos que tiene dentro se pueden mover de un contendor a otro, es lo que harían dispositivos mas pequeños como los móviles.

Contenedor donde originalmente esta el fragmento

Multiples usos de la clase del contenedor móvil
Error de funcionalidad - Para un correcto funcionamiento se precisa de que la clase "contenedor-movil" utilizada para el contenedor móvil se utilice una unica vez en esta página
Elemento vacio
Componente sin función - Añade cualquier elemento al area que quieras desplazar hacia otro lugar en el modo móvil.
Este es un párrafo de ejemplo que se situa dentro de la zona de colocación del fragmento FRG_MoverElementoResponsivo

Contenedor donde se desplazará el elemento en móvil gracias a la clase "contenedor-movil" que le hemos añadido