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

I am working with a page that has two layouts depending on the width of the device used to view the page:

My first thought was that if I only "mobile" devices do not divide "web" divs, then I could avoid loading all these additional elements, thus, a method similar to CSS media query HTML Exists for? Alternatively, is there a way to define two different HTML layouts depending on the device's width on the device?

---

Edit: At least pictures and graphics are concerned, CSS is likely to be used to define image rather than HTML. Instead, instead of:

  & lt; Div id = "img" & gt; & Lt; Img src = "URL" & gt; & Lt; / Div & gt;   
 ... and trying to hide the div, you take this approach instead:  
  & lt; Div id = "img" & gt; & Lt; / Div & gt;   
 And ...  
  div # img {background: none; } / * Mobile * / @ media screen above and (min-device-width: 600 pix) {/ * is web below * / div # img {background: url (URL); Height: 400 pixels; Width: 600px; }}   
 Thus, the mobile version does not load images and we are still using CSS only.   
 
 
 
 Or alternatively, whether it is two different HTML based on the width of the device Is there a way to define layout? Page   
 Path to take the Imho is not the same mechanism for defining different rules for the viewport in HTML.  < / Div>