html - How to align logo and text in bootstrap on small screens? -

I am trying to align a logo and some text within a bootstrap nav bar.

I have the following HTML:

  & lt; Class = "navbar-brand" href = "#" & gt; & Lt; Img class = "hidden-xs" src = "http://s23.postimg.org/5k9xcsb57/logo40_ul.png" alt = "" & gt; & Lt; Img class = "visible-xs" src = "http://s23.postimg.org/etc3mwk13/logo30_ul.png" alt = "" & gt; & Lt; Span class = "navbar-brand-text" & gt; Here are some lessons & lt; / Span & gt; & Lt; / A & gt;  

and this 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: 0 pixels; } .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; }}  

I had some success when the screen was at full width, but the logo and text stack on top of each other on mobile sizes is not above each other.

How do I align my image with my alignment in an NAV bar:

1. It keeps up with and without regard to screen size;

2. Do I have some control over the vertical position of the logo / text?

a rule display: block! Important logo, which make it this way. It should work to be changed like below.

  @ media (max-width: 767px) {.navbar- brand. Visual-xs {display: inline; Use / *! If necessary, then it is necessary * /}}  

Demo: