If a block of content is hidden with CSS, the browser still needs to download the HTML inside that element. All browsers except Opera download the images, too. (In fact, since Opera has switched to Webkit it likely downloads hidden images now.)
One of the best ways to reduce load in mobile browsers is to use background images in CSS (e.g. sprites) where possible, then use mobile-first responsive design. This means making the standard CSS work for mobiles, then using media queries to target larger screens, rather than vice-versa. Put the smaller images in the standard CSS, then switch out for the larger ones in the large-screen media queries.
Media queries work in all modern browsers including IE9+. IE8 and below have less than 6% share globally so showing those users the mobile site isn't a big problem in my opinion.
If old-IE support is important in your situation, you can still use media queries for only the images. For example, design the desktop site as normal but with lower-res images that will load faster on mobile. Then use one media query for the responsive mobile layout, and another media query targeting larger screens to swap out the images for better version.