eliminando uma div, preservando seus elementos

para mover elementos de uma div para uma divisão de fora de ela para tamanhos variados de tela, uma alternativa para repetir HTML e ocultar elementos baseados em viewports é display: contents; .

display: contents; é ideal em situações como essas. Isso faz com que os filhos de um elemento apareçam como filhos diretos de seus pais, desconsiderando o próprio elemento. Isso é valioso ao empregar a grade CSS ou outras técnicas de layout em que o elemento do invólucro deve ser desconsiderado.

Conteúdo 2

. Container { exibição: flex; } .um { exibição: conteúdo; } .one P: Primeiro filho { Ordem: 2; } Neste exemplo, o Div "One" está definido para exibir seus filhos como filhos diretos do "contêiner" div. A propriedade Order é utilizada para reorganizar os parágrafos dentro da div "One" quando em dispositivos móveis.