TimW

You can do what you want by writing both texts in the html, giving them each a selection class (with <span> if necessary) and using display: none; in your css under media queries on the text you don't want to see.

css positioning is not simple, but why not have go? You should find a good reference manual of css declarations and refer to it. Your background declaration for instance is wrong so while it may work it may cause you unpredictable trouble
 
I think (without testing so I could be wrong) You will want to make your images
display: block; position: absolute; top: xx%; left: xx%; You will need to understand media queries to change the display for mobile. Change the size of images by setting height and width in % or by media queries. Making the images display: inline or inline-block will allow you to line them up easily. changing from image to icon you would do with switching from background to content or using sprites or something
 
At least that it how I would start to tackle it.