CODEWITHSUNDEEP
htmlcssflexbox
dulhac
dulhac

Reputation: 113

Is there a way to remove a div but keep its elements?

I need elements inside a div to be outside of their div for different screen sizes.

I currently have the html repeated and am hiding it in certain viewports, this obviously isn't ideal but I'm not sure if there's another way to do it.

Here's the html desktop and tablet

<div class="container">

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

 <p>Content 2</p>

</div>

Here's the html needed for mobile

<div class="container">

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

</div>

This is so I can use flexbox order on all the items within the container div

Upvotes: 6

Views: 1501

Answers (2)

Temani Afif
Temani Afif

Reputation: 274024

This is the perfect use case of display:contents; (https://caniuse.com/#feat=css-display-contents)

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

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

Upvotes: 16

Anderson Koh
Anderson Koh

Reputation: 503

You can try this(if you want):

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

For CSS part:

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

This method is actually came from Bootstrap. But if you don't want to use it you may try to add the code into your HTML and CSS.

Upvotes: -1

Related Questions