Positionate div images without absolute

Okay I have a small problem,who I cant solve. I hope experts will help :)

As you can see I have 3 divs on my index site. No in the middle is one input who is across header and main div. And the yellow circles are divs with but images*

About the div images...their code is The positions are random,not equal as I have done. HTML

<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
</div>

CSS

#container{position:relative;}

.circle{border-radius:50%;
width:127px;
height:127px
positionate:absolute;
}
#apple_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:-5px;
left:15px;
}
#weight_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:30px;
left:80px;
}
#bike_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:100px;
left:20px;
}

So my problem is when re sizing the windows it will go as the div1,they will go across each other. I need too to make it responsible,but when using mobile,i need them to disapear, and when on smaller displays i need them to adjust their size to display. Is the positioning okay or should I use float?