CSS responsive menu elements positioning - html

Question

I am trying to change my old website menu to be mobile friendly and have a problem how the "menu elements" are displayed on small screen.
The menu consists of 3 elements (left, middle, right), now on small screen, they go vertically in same order.
But i would like to know if its possible with css to have them position like that, where the middle keeps its position and the left and right are moved under it, or does it need some more tricks.
How to achieve it?
http://img834.imageshack.us/img834/2203/menuse.jpg
EDIT, Added simplified code what i used to play around:
<div id="header">
<div id="Bholder">
<div id="AButton"></div>
<div id="HButton"></div>
<div id="CButton"></div>
</div>
</div>
CSS
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
#AButton{
float: left;
width: 250px;
height:100px;
background-color: red;
}
#CButton{
float: left;
width: 250px;
height:100px;
background-color: green;
}
#HButton{
float: left;
width: 250px;
height:100px;
background-color: yellow;
}
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
}
}

Answer 1

You could maybe try floating the left and right element to the right, and the middle element to the left. Then make the width of the wrapper element the same size as each element to get them to 'jig' about visually.
But yea, code would be helpful to see how you have the menu set up.
[EDIT]
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
position: relative;
}
#AButton {
position: absolute;
top: 100px;
left: 0;
}
#HButton {
position: absolute;
top: 0px;
left: 0px;
}
#CButton {
position: absolute;
top: 200px;
left: 0;
}
}
A note: I'd stick that in an <ul> with <li> instead of div's. And I'd use classes instead of #id's for your css.