Div to change position in responsive mode - responsive-design

Question

I have 3 elements in my header (A, B, and C), where A and C are static images, and B is a fluid div of text.
What I would like to happen when I reduce my screen size (or view on a mobile device) is that B drops below both, while A and C remain in place--each at opposite sides of the screen.
See this illustration.
http://craigaranha.com/responsiveheader/
thanks

Answer 1

Float the left box to the left, the right box to the right, and let the middle box fill the remaining space. Then when the screen is smaller, just add clear:both on the middle box to make it drop down.
Something like this:
.left, .right {
width:50px;
height:50px;
text-align:center;
line-height:50px;
}
.left {
background-color:blue;
float:left;
}
.right {
background-color:magenta;
float:right;
}
.middle {
background-color:silver;
height:50px;
line-height:50px;
}
#media all and (max-width:800px) {
.middle {
clear:both;
}
}
Assuming markup like this:
<div class="left">A</div>
<div class="right">C</div>
<div class="middle">B is a fluid box of text.</div>
Example codepen

Answer 2

Without seeing your code I can't be 100% sure what your CSS structure is but you could start with #media screen and (min-device-width: XXXpx) { } or #media screen and (min-width: XXXpx){ }. They'll detect the device screen size and give you some conditional CSS rules. Within those those rules, if your right/left divs are floated, you could float the third and use clear:both, or your could use position: fixed; bottom: 0;. It really depends on your document structure and current CSS. Hopefully this has given you a starting point though.
Personally I think position:fixed; would be too much of a quick and dirty solution, the same would go for position:absolute;.