HTML - "CSS Media Query" behavior for HTML?
===

I've been working with a page which has two layouts dependent upon the width of the device being used to view the page:

    /*Above is Mobile*/
    @media screen and (min-device-width: 600px){
    /*Below is Web*/

    }

This approach essentially takes the various "web" and "mobile" divs throughout the page and displays, hides, or alters them as required for either layout; however, while the "web" divs are hidden, they are still loaded by the mobile device, potentially slowing down the page load.

My first thought was that if I could define only the "mobile" divs and not the "web" divs, then I could avoid loading all of these additional elements.  Thus, does a method similar to the CSS media query exist for HTML?  Or alternatively, is is there a way to define two different HTML layouts based on the width of the device the page is displayed on?