How can you remove an element for different media queries? - html

Question

For larger screens I have a scenario where I can display an image next to some text like this:
<div class="wrapper">
<div>
<img>
</div>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>
For smaller screens, I want to eliminate the wrapper so that the image stacks on top of the text; but I can't figure out how to eliminate the div with the wrapper class to let the image stack on top of the image. My issue isn't using media queries, it's eliminating the outer wrapper when I apply the media queries.
Any suggestions?

Answer 1

You can use display:contents for this...
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
.wrapper {
display: flex;
}
#media (min-width: 601px) {
.wrapper {
display: contents;
}
}
<div class="wrapper">
<div>
<img src="https://s3.amazonaws.com/baconmockup/img/baconmockup-200-130.jpg" alt="">
</div>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>

Answer 2

you can use JavaScript to remove the selector nullifying the wrapper.
var wrapper=document.querySelector('.wrapper')
if(window.innerWidth < 500){
wrapper.classList=""
}

Answer 3

UPDATE:
My answer is incorrect-- you apparently can do this with media queries. See Paulie_D's answer to this post for more details.
Original Answer:
You cannot use media queries to eliminate a container while leaving its children in place. The way to do this would be to duplicate the content without the wrapper for smaller screens:
#media (max-width: 800px) {
.showOnLargeScreens {
display: none;
}
}
#media (min-width: 801px) {
.showOnSmallScreens {
display: none;
}
}
<div class="wrapper">
<div class="showOnLargeScreens">
<p>Large screen!</p>
</div>
<p class="showOnSmallScreens">Small screen!</p>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>