Как переместить логотип в другой блок в мобильной версии?

Question

[Qurel]

Есть блок header, который делится на header-top и header-main. В десктопной версии логотип наxодится в header-main, в мобильной версии его нужно поставить в header-top:

Comments

[Rustam Bainazarov]

Дублируйте блок и показывайте нужный с помощью media-запросов.

[Qurel]

SmthTo, спасибо, так и сделала

Answer 1

[Максим]

Самое простое продублировать - один скрыть другой показать
в медиа запросе скрыть тот что не нужен показать тот что нужен

Answer 2

[2cha.headz]

как-то так можно (медиа замените на свои):

if (window.matchMedia('(max-width: 767px)').matches) {
    $(".header-top").append($('.logo'));
} else {
    $(".header-main").append($('.logo'));
}

append заменяйте на свой код в необходимости от положения логотипа внутри .header-main и .header-top

хотя я бы дублировал лого и показывал/скрывал их медизапросами

Answer 3

[Chingiz Мамедов]

Менять структуру DOM можно через JavaScript, но есть вопрос, зачем? Перед вёрсткой или программированием надо обдумать, что будет дальше. Обдумайте зачем вам нужна такая реализация? Может заранее вынести его или вообще не надо.

Comments

[Qurel]

Если я сделаю отдельно логотип, то как его отцентрировать? Если его обернуть в контейнер у него будет только padding 15px

[Chingiz Мамедов]

Qurel, в смысле только паддинг?

[Qurel]

Я сделала по-другому: разместила логотип в header-top и в header-main, на разныx разрешенияx один скрывала, другой показывала