Как разместить визуально элемента выше чем он в коде страницы?
1. CSS
Основной принцип такой: задать родительскому контейнеру
.wrapper {
display: flex;
flex-direction: column;
}
Для дочерних элементов установить соответствующее свойство order
.form-block {
order: 1;
}
.heading-block {
order: 2;
}
Разметку, конечно, нужно переделать соответственно.

2. JS
Переместить элемент. Например: 
$( '#form' ).appendTo( '#block' );
Для данного случая можно решить без 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;
}