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

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>

Answer 2

You can try this(if you want):
<div class="container">
<div class="one d-none d-md-block">
<p>Content 1</p>
</div>
<p class="d-block d-md-none">Content 1</p>
<p>Content 2</p>
</div>
For CSS part:
.d-none {
display: none;
}
.d-md-none {
display: none;
}
.d-md-block {
display: block;
}
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) {
.d-none {
display: none;
}
.d-block {
display: block;
}
}
This method is actually came from Bootstrap. But if you don't want to use it you may try to add the code into your HTML and CSS.