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

我需要一个div内的元素在不同屏幕大小的div外

我现在重复使用html，并将其隐藏在某些视口中，这显然不理想，但我不确定是否有其他方法可以做到这一点

这是html桌面和平板电脑

<div class="container">

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

 <p>Content 2</p>

</div>

内容1

内容2

以下是手机所需的html

<div class="container">

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

</div>

内容1

内容2

---

这样我就可以在container div中的所有项目上使用flexbox order了

这是

display:contents的完美用例（）

display:contents
使元素的子元素显示为元素父元素的直接子元素，忽略元素本身。当使用CSS网格或类似的布局技术时，如果应该忽略包装器元素，这将非常有用


.container{
显示器：flex；
}
.一{
显示：内容；
} 
.第一个孩子{
顺序：2；
}

内容1

内容3

内容2

您可以尝试以下方法（如果需要）：

这种方法实际上来自于。但是如果您不想使用它，您可以尝试将代码添加到
HTML
和
CSS
中

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

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