有没有办法删除一个 div 但保留它的元素？答案

【问题标题】：Is there a way to remove a div but keep its elements?有没有办法删除一个 div 但保留它的元素？
【发布时间】：2019-03-28 22:24:12
【问题描述】：

对于不同的屏幕尺寸，我需要 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 顺序

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

你可以试试这个（如果你愿意的话）：

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

对于 CSS 部分：

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

这个方法其实来自Bootstrap。但如果您不想使用它，您可以尝试将代码添加到您的HTML 和CSS。

【讨论】：