Нужно ли дублировать блок для адаптивности?

Question

[fooger]

Здравствуйте. При верстке под адаптивные устройства, я очень часто прибегаю к дублированию блоков (но, по возможности, стараюсь избегать). И вот, в очередном таком блоке, я решил все же поинтересоваться, может есть возможность избежать дублирования?
Пример: вот есть форма создания билета. В десктопе, слева есть форма (с кнопкой и описанием для нее), справа превью билета. В мобилке - сначала идет часть формы + превью билета + кнопка с описанием.
Если исключить "костыли", типа размещения кнопки абсолютом внизу, или превью вставить между кнопкой и формой + расположить ее абсолютом справа, как в таком случае правильнее всего поступить с кнопкой и описанием под ней - сдублировать ее в два места, и одно из них отображать только в десктопе, а другое только в мобке?
Спасибо!

Comments

[Lostmor]

Может стоит попробовать использовать flex?
При помощи свойства order можно менять порядок элементов

Answer 1

[Арсений Матыцин]

Мыслишь логично, и:
1. Flex-шаманство
2. Grid-шаманство
3. Перемещение элемента с помощью JS
4. Да, тут уже идут костыли

Answer 2

[xonar]

Первое что на ум пришло, это flexbox. Если родителю задать display: flex; а его детям (кнопке и т.д.) order: 1, 2 и т.д., то можно легко менять расположение. И не нужно никаких абсолютов. Если я конечно правильно вас понял.

Answer 3

[DmitryLife]

display: flex;
flex-direction: column-reverse;

Решит все твои вопросы. Или же order у display: flex