header responsive

[Clauido José 3]

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
}	

 

[Clauido José 3]

nossa cara valeu bem legal o ultimo da para pegar uma noção sobre layout reponsive