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

Question

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

我目前有重复的html，并将其隐藏在某些视口中，这显然不是理想的选择，但我不确定是否还有另一种方法。

这是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导致元素的子元素看起来像是元素父元素的直接子元素，而忽略了元素本身。当使用CSS网格或类似布局技术时应忽略包装元素时，这很有用。

.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>