Moving an image around with media queries?

Is it possible to move a floated image to the top or bottom of a div using media queries? I’d like it to be floated right at the top with content flowing around it in the desktop version (this is what is does currently and the div is first in the dom), but move it to the bottom of the div for the mobile version.

Without seeing actual code, I’m kind of flying blind, but here’s my two cents. If the image is currently floating to the right, and content is wrapping around it, I’m guessing the HTML looks something like this:


<div>
    <img src="whatever.jpg" width="50" height="50" />
    <p>I like turtles.</p>
</div>

That means that if you want to move the <img> to the bottom of the <div>, you’ll have to resort to absolute positioning, or something like it. It’s actually pretty easy if you know in advance how tall the image is (and aren’t against hard-coding stuff like that into your styles):


div { position:relative }

@media (min-width: 480px) {
    img { float:right; margin:0 0 5px 5px }
}

@media (max-width: 479px) {
    /* assuming the image is 50x50 */
    div { padding-bottom:50px; }
    img { position:absolute; right:0; bottom:0 }
}

There are some things you might have to tweak to get it to work, but that’s the general idea.

Normally I rag on APO (absolute positioning) for layouts, but in the case of a narrow screen mobile sheet, it’s often the only reliable approach for shifting layout bits around as needed. I agree with sdleihssirhc that it’s probably simplest and best to APO the image in a bottom padding.

I feel icky whenever I use absolute positioning, and especially when I use it for mobile. But this is one of those classic conundrums where I don’t know if we have a choice. The order in the HTML (presumably) is “image-content,” but the order that we want on the screen is “content-image” (those are both top-to-bottom). Is there any other way to accomplish it?

That’s pretty much my take on it as well. APO for large elements, particularly in the content area just feels like asking for it to break – but it’s probably the best solution assuming you know what size the image is going to be.