@fooger

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

Здравствуйте. При верстке под адаптивные устройства, я очень часто прибегаю к дублированию блоков (но, по возможности, стараюсь избегать). И вот, в очередном таком блоке, я решил все же поинтересоваться, может есть возможность избежать дублирования?
Пример: pw2upIm.png вот есть форма создания билета. В десктопе, слева есть форма (с кнопкой и описанием для нее), справа превью билета. В мобилке - сначала идет часть формы + превью билета + кнопка с описанием.
Если исключить "костыли", типа размещения кнопки абсолютом внизу, или превью вставить между кнопкой и формой + расположить ее абсолютом справа, как в таком случае правильнее всего поступить с кнопкой и описанием под ней - сдублировать ее в два места, и одно из них отображать только в десктопе, а другое только в мобке?
Спасибо!
  • Вопрос задан
  • 176 просмотров
Пригласить эксперта
Ответы на вопрос 3
ArsenyMatytsyn
@ArsenyMatytsyn
Teamlead команды разработчиков iAmStudio
Мыслишь логично, и:
1. Flex-шаманство
2. Grid-шаманство
3. Перемещение элемента с помощью JS
4. Да, тут уже идут костыли
Ответ написан
@xonar
Первое что на ум пришло, это flexbox. Если родителю задать display: flex; а его детям (кнопке и т.д.) order: 1, 2 и т.д., то можно легко менять расположение. И не нужно никаких абсолютов. Если я конечно правильно вас понял.
Ответ написан
@DmitryLife
display: flex;
flex-direction: column-reverse;

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

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

Войти через центр авторизации
Похожие вопросы