Hola buenos dias,
La imagenes no se pueden ver, pero si no entendi mal, quieres que en pantallas pequeñas (moviles) el header se vea de una forma y en pantalla grande de otra?
Si es el caso, puede probar realizando el diseño del header para pantallas pequeña aparte, y colocarle la clase .visible-xs, que hace visible el diseño para pantallas xs y lo esconde para todas las otras, mientra que al header para otras pantallas le colocas la clase .hidden-xs, que oculata el diseño para pantalla pequeñas.
Es decir dos header, uno para pantalla pequeñas y otro para los otros tamaños.
Espero que sirva, puedes encontrar mas en:
http://librosweb.es/libro/bootstrap_...tilidades.html
En la parte de
4.3.8 Utilidades responsives
Saludos!