Eliminating a Div While Preserving Its Elements

To move elements from within a div to outside of it for varying screen sizes, an alternative to repeating HTML and hiding elements based on viewports is the utilization of display:contents;.

Display:contents; is ideal in situations like these. It causes an element's children to appear as direct children of its parent, disregarding the element itself. This is valuable when employing CSS grid or other layout techniques where the wrapper element should be disregarded.

Example Implementation:

  

    
Content 1
    
Content 3
  

  
Content 2

.container {
  display: flex;
}

.one {
  display: contents;
}

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

In this example, the "one" div is set to display its children as direct children of the "container" div. The order property is utilized to rearrange the paragraphs within the "one" div when on mobile devices.