Ah indeed. Actually, only Android 4.4 read the media queries. So unfortunately, the best result for the other Android version is to have the desktop version IMO...
I don't see anything wrong in the code you shared. It should work indeed. Then maybe the issue come from the class attribute and/or the HTML tag?
is the MobileFont class applied to the td tag enclosing your text?
When I work with animated gif, what I usually do to have a proper fallback is actually by editing the gif itself.
I ask one of our designer to set the first frame of the gif with the image I want for fallback. By setting the duration of that first frame to 0.00second, it doesn't brake your animation.
The result is that every mail client which don't support animated gif display the first frame, and all the others clients display the animation.
Hope it helps!
I often use this to hide elements with inline declaration :