Is it possible to actually swap out an image responsively?

For example, when the device width triggers a different layout responsively, can it also cause an image on the page to change as well?

Yes you can sort of. It really doesn't swap the images per say but what you would want to have is two image elements in the same space and set the css to "display:none;" for one of the elements essentially making it invisible. Then when you reach your next view point you would set the other element to display:none; and the original element to "display:inline;"

Does this make sense? You are basically making the second image invisible until you reach a certain view-port then making it visible again and making the other image invisible.

I know clear as mud.

Actually, that makes great sense. Here's what's happening. I have an 8-span column (logo) at the top left. Next to it, I have a 4-span column ('click here' image) on the top right. When the device width gets to 509, 'logo' expands to 12 spans kicking 'click here' to the next line. Your solution is awesome for that.

What is the difference between the different attributes of "Display?" ("block", "inline", "inline-block")

Here is a great article referencing exactly that question

http://stackoverflow.com/questions/8969 … line-block