Как выровнять логотип и текст в бутстрапе на маленьких экранах?

Question

Я пытаюсь выровнять логотип и некоторый текст в панели навигации bootstrap.

См JSFiddle

У меня есть следующий HTML:

<a class="navbar-brand" href="#"> 
    <img class="hidden-xs" src="http://s23.postimg.org/5k9xcsb57/logo40_ul.png" alt=""> 
    <img class="visible-xs" src="http://s23.postimg.org/etc3mwk13/logo30_ul.png" alt=""> 
    <span class="navbar-brand-text">Some text here</span> 
</a> 

И это CSS:

.navbar-brand { 
    padding: 0px; 
} 

.navbar-brand-text { 
    padding-top: 12px; 
    padding-left: 5px; 
    display: inline-block; 
    font-size: 0.875em; 
    line-height: 1.57em; 
} 
.navbar-brand img { 
    vertical-align: top; 
    padding-top: 3px; 
    display: inline-block; 
} 

@media (max-width: 767px) { 
    .navbar-brand { 
    padding: 0px; 
    } 

    .navbar-brand-text { 
    padding-top: 12px; 
    padding-left: 5px; 
    display: inline-block; 
    font-size: 0.875em; 
    line-height: 1.57em; 
    } 
    .navbar-brand img { 
    vertical-align: top; 
    padding-top: 10px; 
    padding-left: 5px; 
    display: inline-block; 
    } 
} 

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

Как выровнять мое изображение с моим текстом в панели навигации так:

1. остается бок о бок, независимо от размера экрана и;

2. У меня есть некоторый контроль над вертикальным положением логотипа/текста?

Answer 1

На логотипе есть правило display: block!important;, что делает его таким. Изменение его, как показано ниже, должно выполнять работу.

@media (max-width: 767px) { 
    .navbar-brand .visible-xs { 
     display: inline; /* use !important if necessary */ 
    } 
} 

DEMO:http://jsfiddle.net/g8za882k/3/