Eliminando un DIV mientras preserva sus elementos

para mover elementos desde dentro de un DIV a exteriores para diferentes tamaños de pantalla, una alternativa a repetir HTML y ocultar elementos basados ​​en puertos de visión es la utilización de Display: Contents; .

Display: Contents; es ideal en situaciones como estas. Hace que los hijos de un elemento aparezcan como hijos directos de su padre, ignorando el elemento en sí. Esto es valioso cuando se emplea la cuadrícula CSS u otras técnicas de diseño donde el elemento envoltore se debe ignorar.

Implementación de ejemplo:

  

    
Content 1
    
Content 3
  

  
Content 2

.container {
  display: flex;
}

.one {
  display: contents;
}

.one p:first-child {
  order: 2;
}

En este ejemplo, el DIV "One" se establece para mostrar a sus hijos como hijos directos del "Contenedor" Div. La propiedad del pedido se utiliza para reorganizar los párrafos dentro del "One" Div cuando está en dispositivos móviles.