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

Question

[Qairat]

У меня есть header.
При нормальном экране смотрится вот так:

Теперь, при адаптивности смог сделать этот header вот так:

А хочется вот так:

Помогите, как мне решить эту проблему?
Вот код моего css:

@media screen and (max-width: 600px) {
               .head-address, .head-search, .head-btn{
                    display:none;
               }
               .hedik{
                    float: none;
                    margin: 0 auto;
               }
               .head-number{
                    order: 1;
               }
               .head-cart{
                    order: 2;
               }
               .navbar-header{
                    order: 3;

               }
            }

Comments

[Qairat]

если что вот ссылка на сайт который делаю: my.sdudorm.kz

[Ярослав Иванов]

Ужасная верстка. Почему у разных элементов одинаковые классы ? почему у лого и у ссылок класс col-lg-2 ?

[Qairat]

Ярослав Иванов: хехе. Ну классы может же быть одинаковым, а id разными. А на счет col-lg-2, по бутстрапу сделал.

[ProjectSoft]

Qairat Batyrbayev Ярослав Иванов Нормальная вёрстка
Скопировал с DevTools

<div class="container" style="border: 0px solid; background-color: #DEDEDE;">
                        <div class="col-lg-2">
                            <a href="/"><img src="/template/images/home/logo2.png" alt="" style="height: 100px;"></a>
                        </div>

                        <div class="col-lg-2 col-lg-push-6">
                            <div class="hedik head-number">
                                <i class="fa fa-phone fa-lg"></i> [phone]
                            </div>
                            <div style="margin-top: 20px; "> 
                                <button class="btn btn-success head-btn">Заказать звонок</button>
                            </div>
                        </div><div class="col-lg-2 col-lg-push-6">
                            <div class="hedik head-cart" style="margin-top: 30px;">
                                <a href="/cart">
                                <i class="fa fa-shopping-cart fa-lg"></i> Корзина 
                                (<span id="cart-count">0</span>)
                                </a>
                            </div>
                            <div class="head-search" style="margin-top:20px;">
                               <div id="imaginary_container"> 
                                    <div class="input-group stylish-input-group">
                                        <input type="text" class="form-control" placeholder="Поиск">
                                        <span class="input-group-addon">
                                            <button type="submit">
                                                <span class="glyphicon glyphicon-search"></span>
                                            </button>  
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div><div class="col-lg-6 col-lg-pull-4">
                            <div class="hedik head-address">г.Алматы, мкр.Таугуль 3, ул, Шайкенова, д.34</div>
                            <div class="">
                                <div class="navbar-header">
                                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>
                                </div>
                                <div class="mainmenu">
                                    <ul class="nav navbar-nav navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                                        <li><a href="/">Главная</a></li>
                                        <li><a href="/dostavka/">Доставка</a></li>
                                        <li><a href="/montazh/">Монтаж</a></li>
                                        <li><a href="/oplata/">Оплата</a></li>
                                        <li><a href="/contacts/">Контакты</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>  
</div>

Дальше сами
Подробнее bootstrap-3.ru/css.php#grid-column-ordering (Выравнивание колонок)

Answer 1

[Александр Ружевич]

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

<div class="col-lg-2"></div>
<div class="col-lg-6"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>

можно так

<div class="col-lg-2 col-xs-12"></div>
<div class="col-lg-6 xs-hidden"></div>
<div class="col-lg-4 col-xs-12">

   <div class="row">

     <div class="col-sm-6 col-xs-12">телефон</div>
     <div class="col-sm-6 col-xs-12">корзина</div>

   </div>
   <div class="row xs-hidden">

     <div class="col-sm-6">заказать звонок </div>
     <div class="col-sm-6">поиск</div>

   </div>

</div>

но это примерно, поработайте еще с "col" ибо сейчас выглядит плохо, бутстрап сделает много работы за вас если правильно будете ним пользоваться