html - 有没有办法删除 div 但保留其元素？

Question

对于不同的屏幕尺寸，我需要将 div 内的元素置于其 div 之外。

我目前有重复的 html 并将其隐藏在某些视口(viewport)中，这显然不理想，但我不确定是否有其他方法可以做到这一点。

这是 html 桌面和平板电脑

<div class="container">

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

 <p>Content 2</p>

</div>

这是移动端需要的html

<div class="container">

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

</div>

这样我就可以在容器 div 中的所有元素上使用 flexbox 顺序

Answer 1

这是 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>