Как поменять элементы местами с помощью grid?

Question

Хочу переставить блок contacts на место menu. Как это сделать с помощью гридов? Вроде прописал код на перестановку, но не работает

Сайт ilyin1ib.beget.tech

@media screen and (max-width: 1300px) {
    .bg_show {
        display: block;
    }

    header .wrapper .content {
        display: grid;
        grid-template-columns: repeat(3, max-content);
    }

    header .wrapper .content:last-child {
        
        grid-column: 2;
        grid-row: 3;
    }

    .menu {
        width:  300px;
        background: url(../img/menu-bg.jpg) center no-repeat;
        background-size:  cover;
        height: 100vh;
    }

    .menu>ul{
        display: flex;
        flex-direction: column;
    }

    .request {
        display: none;
    }


    .contacts {
        flex-direction: column;
    }


    .contacts a.number {
        margin-right: 0;
        font-size: 12px
    }


    .fab.fa-viber {
        margin-left: 0;
    }

    .main .wrapper .content {
        padding-left: 0 !important;
    }
}

<!doctype html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <link rel="preload" as="font" href="fonts/rostov.woff2" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link href="css/clear.css" rel="stylesheet">
    <link href="css/adaptive.css" rel="stylesheet">
    <link rel="stylesheet" href="css/hamburgers.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
    <!-- <script src="js/preloader.js"></script> -->
    <title>Inter-Web</title>
</head>

<body>
    <!-- <div id="page-preloader" class="preloader" id="preloader">
    Int<span class="blink-one">e</span>r-w<span class="blink-two">e</span>b
  </div> -->
    <div class="bg"></div>
    <div class="popup">
        <div class="popup-content">
            <button class="popup-close">&times;</button>
            <h4 class="popup-header">Заказать звонок</h4>
            <form action="#">
                <input type="text" class="name-user" placeholder="Имя">
                <input type="text" class="phone-user" placeholder="Телефон">
                <button class="submit" type="submit">Отправить</button>
                <span>Наш констультанат свяжется с Вами в течении 15 минут</span>
            </form>
        </div>
    </div>
    <header>
        <div class="wrapper">
            <div class="content">
                <a href="#" class="logo">
                    Inter-Web
                </a>
                <nav class="menu">
                    <ul>
                        <li><a href="#">Главная</a>
                            <ul class="sub_menu">
                                <li><a href="#">Брендинг</a></li>
                                <li><a href="#">Вэб-разработка</a></li>
                                <li><a href="#">Медиа-маркетинг</a></li>
                                <li><a href="#">Комплексное<br>продвижение</a></li>
                            </ul>
                        </li>
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Услуги</a>
                        <li><a href="#">Порядок работы</a></li>
                        <li><a href="#">Этапы работы</a></li>
                        <li><a href="#">Портфолио</a></li>
                        <li><a href="#">Новости</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>
                </nav>
                <div class="contacts">
                    <div class="phone-block">
                        <a class="number" href="tel:88005569874">8 800-556-98-74</a>
                        <button class="request open-popup">Заказать звонок</button>
                    </div>
                    <div class="social-block">
                        <i class="fab fa-viber"></i>
                        <i class="fab fa-telegram-plane"></i>
                        <i class="fab fa-whatsapp"></i>
                    </div>
                </div>
                <div class="hamburger_wrapper">
                    <div class="hamburger hamburger--spin">
                        <div class="hamburger-box">
                            <div class="hamburger-inner"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section class="main">
        <div class="wrapper">
            <div class="content">
                <p class="main-title">
                    Нам Вы можете полностью доверить создание, доработку и продвижение сайта.
                </p>
                <h1>Первая веб-студия с постоплатой по<br>факту выполненной работы</h1>
                <button class="btn-main open-popup"><span>Оставить заявку</button>
            </div>
        </div>
    </section>
    
</body>

Answer 1

Попробуйте явно определить позицию нужных вам элементов .contacts и .menu с помощью свойств grid-column-start, grid-column-end, grid-row-start и grid-row-end, либо же их сокращенными вариантами grid-column и grid-row.

Я добавил свойства следующим образом:

Для .contacts

grid-column-start: 2; grid-row-start: 1;

Для .menu

grid-column-start: 3;

БЛОГ НА HUSL

Как поменять элементы местами с помощью grid?

Ответы (1 шт):