Help a n00b with responsive email design

I'm a marketer trying to convert our email to a responsive email design. We don't have developers on staff who can handle this.

Background: The standard email we send out has a large Hero image Spot A, full width of screen, and three square images underneath, Spots B, C, D.

I'd like to accomplish:

1. When the device is a smartphone, the hero resizes to fit the new width without getting cut off
2. Spots B, C, D are under Spot A and are stacked on top of each other

I tried to do this and came up with this so far: http://goo.gl/veDB5. I used colored boxes to visualize better. I've been working on this for hours, searching tons of online resources and I just can't figure out why the browser is ignoring my media queries. I'd really, really appreciate any help.