Есть ли способ удалить div, но сохранить его элементы?

Question

Мне нужно, чтобы элементы внутри 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>

Это так, чтобы я мог использовать порядок flexbox для всех элементов в контейнере div

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

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