Position floating div on top of another element - html

Question

I have a header with a logo floating left and a phone number floating right. When the screen is not wide enough for both, the phone number jumps underneath the logo, which is not what I want.
Since most of the logo image is just background gradient anyway, I'd like to position the phone number on top of the logo element, when the screen is narrower than 818px.
How might I do that?
Here's the basic code:
<div id="head-wrap">
<a class="home-link" href="http://example.com">
<img src="logo.png" class="logo">
</a>
<div class="tel">
<a href="tel:[phone]" class="phone">
<p class="phone">
<img src="phone-icon.png">555 555 555
</p>
</a>
</div>
</div>
.home-link {
float:left;
}
.tel {
float: right;
}
.logo {
width: 657px;
}

Answer 1

First of all you can solve part of your problem by putting div.tel before your logo. This way it will be displayed on top of the logo if you don't have enough space. Then you could use a media query to put phone number on the left for example like this:
#media screen and (max-width: 818px) {
.tel {
float: left;
}
}
Fiddle: https://jsfiddle.net/s2Lubqqp/1/

Answer 2

Since you need to overlap phone on logo you need to keep their position absolute and same position
also since you have set width of logo to width: 657px; better to make it auto when you resize window... hope it works for you
here is the media query :)
#media screen and (max-width: 818px) {
.tel {
width:auto;
position:absolute;
left:5px;
top:5px;
}
.logo {
width: auto;
position:absolute;
left:5px;
top:5px;
}
}

Answer 3

You could try something like that :
.home-link {
float:left;
}
.tel {
float: right;
}
.logo {
width: 657px;
}
#media only screen and (max-width: 818px) {
.home-link {
width: 30%;
max-width: 300px;
}
.logo {
width: 100%;
}
}
This way you can change the percentage width of the home-link section, and force the logo to fit it with the "width: 100%;"
The fiddle is here