Как разместить визуально элемента выше чем он в коде страницы?

Question

[jaygen]

Есть код:

<div>
<p>TEXT1</p>
<p>TEXT2</p>
<h2>NEW TEXT2</h2>
<p>TEXT2.1</p>
<p>TEXT2.2</p>
<div style="display:flex;">
<div>Схема работ</div>
<div>Форма</div>
</div>
</div>

Как разместить элемент <div>Форма</div> в мобильной версии так что бы он оставался в коде документа.. Но он сам был перед заголовком < H2 >

Comments

[Ярослав Иванов]

Answer 1

[nveretenko]

Для данного случая можно решить без js

<div class="wrapper">
    <p class="item-1">TEXT1</p>
    <p class="item-2">TEXT2</p>
    <h2>NEW TEXT2</h2>
    <p>TEXT2.1</p>
    <p>TEXT2.2</p>
    <div class="container">
        <div>Схема работ</div>
        <div class="form">Форма</div>
    </div>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
}

.container {
  display: contents;
}

.form, .item-1, .item-2 {
  order: -1;
}

Answer 2

[archelon]

1. CSS
Основной принцип такой: задать родительскому контейнеру

.wrapper {
display: flex;
flex-direction: column;
}

Для дочерних элементов установить соответствующее свойство order

.form-block {
order: 1;
}
.heading-block {
order: 2;
}

Разметку, конечно, нужно переделать соответственно.

2. JS
Переместить элемент. Например:
$( '#form' ).appendTo( '#block' );

Answer 3

[Дима Паутов]

отрицательный margin

Answer 4

[Sakhalinex]

.wrapper {
display: flex;
flex-direction: column-reverse;
}

Comments

[Sakhalinex]

Или с помощью order