Éliminer un div tout en préservant ses éléments

pour déplacer des éléments à l'intérieur d'un div à l'extérieur pour la tailles d'écran variables, une alternative à répéter HTML et à masquer des éléments basés sur la vue est l'utilisation de l'utilisation de la affiche: contenu; .

affiche: contenu; est idéal dans des situations comme celles-ci. Il fait apparaître les enfants d'un élément comme des enfants directs de son parent, sans tenir compte de l'élément lui-même. Ceci est précieux lors de l'utilisation de la grille CSS ou d'autres techniques de mise en page où l'élément de wrapper doit être ignoré.

EXAMPLE Implémentation:

  

    
Content 1
    
Content 3
  

  
Content 2

.container {
  display: flex;
}

.one {
  display: contents;
}

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

Dans cet exemple, le div "un" est défini pour afficher ses enfants en tant qu'enfants directs du "conteneur" div. La propriété Order est utilisée pour réorganiser les paragraphes dans la div "One" en cas de périphériques mobiles.