How to visually place an element higher than it is in the page code?

Question

HTML

There is a code:

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

How to place an element <div>Форма</div>in the mobile version so that it remains in the document code.. But it was before the heading < H2 >

Answer 1

For this case, you can solve without 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

1. CSS
The basic principle is this: set the parent container

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

For child elements, set the appropriate order property

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

The markup, of course, needs to be redone accordingly.
2. JS
Move element. For example:
$( '#form' ).appendTo( '#block' );

Answer 3

negative margin

Answer 4

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