html - Is there a way to remove a div but keep its elements?

Question

I need elements inside a div to be outside of their div for different screen sizes.

I currently have the html repeated and am hiding it in certain viewports, this obviously isn't ideal but I'm not sure if there's another way to do it.

Here's the html desktop and tablet

<div class="container">

 <div class="one">
  <p>Content 1</p>
 </div>

 <p>Content 2</p>

</div>

Here's the html needed for mobile

<div class="container">

 <p>Content 1</p>
 <p>Content 2</p>

</div>

This is so I can use flexbox order on all the items within the container div

Answer 1

This is the perfect use case of display:contents; (https://caniuse.com/#feat=css-display-contents)

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

.container {
  display:flex;
}

.one {
  display:contents;
} 

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

<div class="container">

 <div class="one">
  <p>Content 1</p>
  <p>Content 3</p>
 </div>

 <p>Content 2</p>

</div>