@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 >
  • Вопрос задан
  • 131 просмотр
Решения вопроса 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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
archelon
@archelon
1. CSS
Основной принцип такой: задать родительскому контейнеру
.wrapper {
display: flex;
flex-direction: column;
}

Для дочерних элементов установить соответствующее свойство order
.form-block {
order: 1;
}
.heading-block {
order: 2;
}

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

2. JS
Переместить элемент. Например:
$( '#form' ).appendTo( '#block' );
Ответ написан
bootd
@bootd Куратор тега HTML
Гугли и ты откроешь врата знаний!
отрицательный margin
Ответ написан
@Sakhalinex
.wrapper {
display: flex;
flex-direction: column-reverse;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
KazanExpress Иннополис
До 120 000 ₽
CORE Москва
от 130 000 до 160 000 ₽
21 окт. 2020, в 22:40
300 руб./за проект
21 окт. 2020, в 22:34
25000 руб./за проект
21 окт. 2020, в 21:24
7000 руб./за проект