header responsive

Boa noite glaera,

Preciso de uma ajuda com layout desse site no topo eu tenho o logo e o com telefone eu quero que ele seja responsive e que quando for diminuindo a resolução da tela o telefone fique em cima do logo olha meu código:

<header>
 <div class="container-fluid">
 <div class="row">
 <div id="logo" class="col-md-9">
 <a href="default.aspx"><img src="images/logo.png" /></a>
 </div>
 <div class="col-md-3" id="telsHead" style="padding:0px 10px">
 <strong><span class="glyphicon glyphicon glyphicon-phone-alt"></span>:</strong>(011) 39316081 / 39318241
 </div>
 </div>
 </div>
</header>

	meu css:

#logo{
 padding: 10px 50px;
 height:100px;
 width:200px;
 float:left
}
#telsHead{
	background: -moz-linear-gradient(top, #CCC 80%, #fefefd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Opera 11.10+ */
	background: linear-gradient(to bottom, #CCC 80%,#fefefd 100%); /* W3C */
	border-radius:0 0 5px 5px;
	box-shadow:0 1px 1px #000;
	height: 30px;
	padding: 0 5px;
	list-style:none;
	font-size:150%;
	font-weight:bold;
 text-align: center;
 width: 400px;
 float:right;
 left: -100px
}