Prevent loading of thumbnail on small devices?

I am designing a responsive website and am not using separate stylesheets for different devices/sizes. Instead I’m using media queries within one stylesheet.

I have an archive page and I’d like to show the post thumbnail down the right hand side on device widths wider than 650px, but hide the thumbnail on smaller screens.

I’ve managed to do this successfully, HOWEVER I have realised that on smaller screens, the images still download but are just hidden. I’d like to avoid downloading the images at all.

Any ideas how I can do this in CSS with dynamic images? Obviously I can’t hardcode the image URL into the CSS because it’s different for every post.

Here is my HTML/PHP from my template:

<div class="career-cover" style="background: url('<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' ); echo $src[0]; ?>') no-repeat center center"></div>

And here is my CSS:

div.career-cover {
        display: none;
        @media all and (min-width: 650px) {
            border: 0.5em solid #000;
            display: inline-block;
            float: right;
            height: 200px;
            margin: 0 2em 2em 2em;
            width: 150px;
        }
    }

Any ideas on how I can achieve this?