Как поменять местами элементы таким образом? Такое возможно без js?

Question

[Please2334]

HTML

<header class="header">
        <div class="container">
            <div class="header__top">
                <a class="logo" href="#">
                    <img class="header__logo" src="images/header-logo.png" alt="">
                </a>
                <nav class="nav">
                    <ul class="nav__list">
                        <li class="nav__list-item">
                            <a class="nav__list-link" href="#diagnostic">Диагностика</a>
                        </li>
                        <li class="nav__list-item">
                            <a class="nav__list-link" href="#price">Стоимость</a>
                        </li>
                        <li class="nav__list-item">
                            <a class="nav__list-link" href="#team">Мастера</a>
                        </li>
                        <li class="nav__list-item">
                            <a class="nav__list-link" href="#comments">Отзывы</a>
                        </li>
                        <li class="nav__list-item">
                            <a class="nav__list-link" href="#questions">Вопросы</a>
                        </li>
                    </ul>
                </nav>
                <div class="call">
                    <p class="call__text">Москва</p>
                    <a href="#" class="call__button">Позвонить</a>
                </div>
            </div>

CSS

.header {
    background-image: url(../images/header-bg.jpg);
    background-size: cover;
    /* background-position: 100% 100%; */
    background-repeat: no-repeat;
    min-height: 100vh;
}

.header__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 46px;
}

.logo {
    padding-bottom: 5px;
}



.nav {
    width: 50%;
}

.nav__list {
    display: flex;
    gap: 40px;

}

.call {

    display: flex;
}


.call__text {
    display: flex;
    align-items: center;
    padding-right: 40px;
}

.call__text::before {
    content: '';
    padding-right: 10px;
    background-image: url(../images/geo.svg);
    background-repeat: no-repeat;
    min-width: 20px;
    min-height: 20px;
}

.call__button {
    padding: 18px 40px;
    font-weight: 700;
    background-color: transparent;
    border: 2px solid #FFC464;
    border-radius: 15px;
    color: #FFC464;
    cursor: pointer;
    transition: all .3s ease;

}

.call__button:hover {
    background-color: #fff;
    color: black;

}

Comments

[Anonymous]

Почему вы все боитесь JS? Не так уж он и сложен, как вы думаете.

[Please2334]

Anonymous, Потому-что решил пока остановиться на оттачивании навыков в html и css. Js считаю еще рано, слишком перегруженно получится.

[Froggyweb]

с грид лайаутом можно. чем здесь js здесь поможет - не знаю.
да с флексом можно. order - в помощь.

[Anonymous]

Please2334, а что там такого можно оттачивать? Сидеть и запоминать букАвки?
Сделать через JS можно, а вот через CSS не знаю. Он не настолько интерактивный.

[Ankhena]

Anonymous, js тут даром не нужен. Только прибавит к css ещё немножко кода.

Please2334, флексы, гриды, order, display: contents. Ну или даже абсолюты...

Answer 1

[Rsa97]

CSS, @media, grid-template

Comments

[Please2334]

То-есть следует прописать display: grid контейнеру хедера, при мобильной ширине? А при обычной ширине можно оставить flex?

[Rsa97]

Please2334, Можно и полность на grid.
Для широкого варианта одна строка "a b b b . c d"
Для узкого две строки "c b b b" и "a . . d"

[NeshnyyFevral]

Please2334, grid-template-areas

Answer 2

[Yulia Khavaeva]

Как уже ответили выше можно использовать grid-template, а можно поиграть со флексами и попробовать применить order и @media для изменения положения элементов