Наружный div исчезает, когда внутренний div использует «видимый» класс

Question

Вот fiddle для справки.

Я только начинаю с Bootstrap 3, и я не понимаю, почему div не ведет себя так, как я этого хочу. У меня есть следующий код:

<div class="container"> 
    <div id="mdgov_TopSliverBar" class="col-xs-12"> 
     <div id="mdgov_TopSliverBarContent"> 
      <div id="mdgov_sliverRight"> 
       <span>Testing</span> 
      </div> 
      <div id="mdgov_sliverLeft"> 
       <div id="mdgov_mobileNavButton" class="visible-xs"> 
        <i class="fa fa-bars">&nbsp;</i> 
        <span>Menu</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Что мой код делает:

При изменении размера окна в нечто иное, чем дополнительный мал ДИВ «mdgov_TopSliverBar» исчезает, и все, что я ушел с это слово «Тестирование» - это было бы в правильном месте, если div «mdgov_TopSliverBar» не исчез.

Что мой код должен делать:

При изменении размеров окна, я хочу ДИВ «mdgov_TopSliverBar», чтобы остаться вместе с DIV «mdgov_sliverRight», и я хочу ДИВ «mdgov_mobileNavButton» исчезнуть. В принципе, у меня должен быть черный бар наверху со словом «Тестирование» справа, когда размер окна является чем-то отличным от лишнего. Когда окно будет лишним, я должен добавить значок мобильного меню и слово «Меню» слева в дополнение к «Тестированию» справа.

Еще раз, вот fiddle для справки.

Answer 1

Проблема была в CSS. Мне нужно было избавиться от float: left; в #mdgov_sliverLeft и добавить float: right; в #mdgov_sliverRight. Так оно и должно выглядеть следующим образом:

#mdgov_sliverLeft { 
    white-space: nowrap; 
} 

#mdgov_sliverRight { 
    float: right; 
    white-space: nowrap; 
    right: 2.5%; 
    padding: 6px 0; 
} 

Вот обновленный fiddle.

Answer 2

Попробуйте добавить видимый-md и/или видимый-sm вместе с visible-xs - вы можете вложить эти классы, чтобы получить желаемый эффект.