CODEWITHSUNDEEP
cssmedia-queries
Durian Nangka
Durian Nangka

Reputation: 25

CSS - remove an element from its parent with media query

Using media queries in CSS, is it possible to remove an element from its parent, like so:

Default:

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

With media query:

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

Thanks for any suggestions.

Upvotes: 1

Views: 2902

Answers (1)

NikxDa
NikxDa

Reputation: 4187

Technically, no. It is not possible for CSS media queries to change the DOM order (Flex order can do something similar, maybe it can also help).

But: You can achieve the desired effect differently. By cloning the item (so that you have it once inside, once outside the parent) and then showing/hiding the respective one, you will mimic the effect you are looking for.

Example:

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

Now simply toggle between styles

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

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

Upvotes: 6

Related Questions