CSS - 使用媒体查询从其父元素中删除一个元素答案

【问题标题】：CSS - remove an element from its parent with media queryCSS - 使用媒体查询从其父元素中删除一个元素
【发布时间】：2018-12-18 02:04:25
【问题描述】：

在 CSS 中使用媒体查询，是否可以从其父元素中删除元素，如下所示：

默认值：

<div id="parent">
<div id="child"></div>
</div>

使用媒体查询：

<div id="parent"></div>
<div id="child"></div>

感谢您的任何建议。

【问题讨论】：

您不能使用 CSS 移动 DOM 中的项目，您需要使用 javascript。你为什么要这样做？也许还有其他可以探索的解决方案。
您可以更改同级元素的顺序，但仅使用 CSS 是不可能的
@Sam：我想移动一个相对于其父级绝对定位的元素，使其在较小的屏幕分辨率上独立（放置在其父级下方而不是其父级内部）。
你能展示你的css吗

标签： css media-queries

【解决方案1】：

从技术上讲，没有。 CSS 媒体查询无法更改 DOM 顺序（Flex order 可以做类似的事情，也许它也可以提供帮助）。

但是： 您可以以不同的方式达到预期的效果。通过克隆该项目（这样您就可以将其一次在父项内部，一次在父项之外），然后显示/隐藏相应的项，您将模仿您正在寻找的效果。

例子：

<div class="parent">
    <div class="child child-inner"></div>
</div>
<div class="child child-outer"></div>

现在只需在样式之间切换

.child-inner { display: block; }
.child-outer { display: none; }

@media only screen and (max-width: 900px) {
    .child-inner { display: none; }
    .child-outer { display: block; }
}

【讨论】：