Адаптивная верстка для мобильных устройств, как правильно?

Question

[maksell]

Добрый вечер, делаю адаптивную верстку впервые и столкнулся с проблемой. Не получается грамотно расположить элементы. Подскажите пожалуйста, как сделать правильно

1. Как выглядит сайт на Десктоп версии


2. Как нужно расположить элементы для мобильной версии


3. Код

<div class="top_menu">
    <div class="container-fluid">
        <nav class="row">
            <div class="col-sm-4  col-md-12 cart_logo">
                <a class="nav-link " href="/cart">
                <img class=" mr-1"  src="https://img.icons8.com/ios-filled/100/000000/shopping-bag.png" alt ="Корзина">
                Корзина
                    {% with	total_items=cart|length	%}
                        {% if	cart|length	>	0	%}
                                ({{ total_items	}})
                        {% else	%}
                            (0)
                        {% endif%}
                    {% endwith %}
                </a>
            </div>
            <div class="col-sm-4 col-md-12 logo">
                <a href="/"><img class="img-fluid"  src="../../../static/img/logo.png" alt ="Лого"></a>
            </div>
            <ul class="nav navbar-expand-lg category mx-auto">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    &#9776;
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    {% for category in all_category %}
                        <li class="nav-item category ">
                            <div class="dropdown category">
                                <a class="btn category ">
                                    {{category}}
                                </a>
                                <div class="dropdown-menu category">
                                    <div class="container-field">
                                        <div class="row justify-content-center">
                                            {% for topic in category.topic.all %}
                                                <div class="col-2 ml-2">
                                                    <a class="dropdown-item font-weight-bolder" >{{topic}}</a>
                                                    {% for menu in all_menu %}
                                                        {% if menu.topic == topic and menu.category == category %}
                                                            <a class="dropdown-item" href="/{{category.slug}}/{{menu.slug}}">{{menu.title}}</a>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </div>
                <li class="nav-item search align-self-center mr-3">
                    <form class="d-flex" action ="{% url 'search' %}" >
                        <button  type="submit"><i class="fa fa-search"></i></button>
                        <input class="search w-60" type="search" value="{{search}}" placeholder="Искать товары", name="search">
                    
                    </form>
                </li>
            </ul>
        </nav>
    </div>
</div>

Answer 1

[Dubrovin]

Возможно я не прав, но полагаю, что расположение элементов должно зависеть от дизайна шапки в мобильной версии, т.е. дизайн шапки в мобильной версии может (должен?) отличаться от дизайна шапки десктопной версии, в т.ч. мобильная шапка может включать другой набор элементов и/или другой внешний вид элементов.

Comments

[maksell]

Возможно, но я не знаю как это реализовать

[Dubrovin]

maksell, есть два варианта:
1) Скрыть конкретные элементы через медиазапросы и display none на мобильной вёрстке и на десктопе
2) Сделать 2 секции - одну для мобильной шапки, другую для десктопа. И скрывать ненужную также через медиазапросы.