Bootstrap 3 - Кнопки навигации, перекрывающиеся текстовым выпуском

Question

Вот скрипка, чтобы увидеть проблему.

https://jsfiddle.net/nn6ydqcw/1/

<header> 
    <nav class="navbar navbar-inverse" role="navigation "> 
     <div class="col-md-12" style="height:150px;background-color:#FFFFFF"> 
      <div class="col-md-3" ><a href="index"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png"></a></div> 
      <div class="col-md-9" ><h1>Tag line will come here and it will be managed dynamically</h1></div> 
     </div> 
     <div class="col-md-12"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="home">HOME</a></li> 
        <li><a href="contact">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

Я использую Bootstrap 3 в коде выше, и он прекрасно работает на рабочем столе/ноутбук и т.д. Но когда я вижу его в мобильном или изменении размеров браузера, чтобы увидеть в меньшем экране, он отображает в следующая последовательность. Поэтому проблема заключается в том, что на меньшем экране, когда я нажимаю значок переключения, кнопки навигации перекрывают линию тегов.

1. Logo
2. навигации Переключить Иконка
3. текста на основе тегов линия

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

1. Logo
2. Текст на основе тегов линия
3. Переключить Навигация Переключить Иконка

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

Answer 1

Проверьте стиль = "height: 150px; background-color: #FFFFFF" у вас конфликт в высоте: 150 пикселей; И я думаю, вам нужно использовать push и pull in bootstrap.

Answer 2

Обновить код следующим образом:

CSS:

 @media only screen and (max-width: 768px) { 
    body { 
    background-color: orange; //FOR TESTING PURPOSE 
    } 

    #tagstyle { 
     position: relative; 
     left: 220px; 
     top: -200px; 
     padding: 0px; 
     width: 60%;  
     } 
} 

HTML: [Добавить идентификатор, как показано ниже]

<h1 id="tagstyle">Tag line will come here and it will be managed dynamically</h1> 

Desktop Вид:

Mobile View: