有没有办法删除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;的完美用例

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>