I'm building a responsive site but don't want to just *hide* elements for smaller screens, I want to **remove** them completely to reduce load times.

I've got this working so far with 

```
if (window.innerWidth < 768) {
    $('.widescreen').remove();
}

```

The class `.widescreen` is added to all elements that are only to be loaded on screens wider than 768px

I then want this to work if a user resizes the browser window (or turns a device 90°) so I tried this:

```
$(window).resize(function() {
    //small-screen
    if (window.innerWidth < 768) {
        $('.widescreen').remove();
    }
    //end small-screen
});

```

Which works but only when a window is resized not loaded at the smaller size. Which I guessed would happen.

Is there a way of achieving this so it works both when a page is loaded and when the browser window is resized?

Then, of course, the trick is to **add the content back** when the window is resized to wider than 768px! But I'll try to figure that one out if the first part is actually possible!!