Move content on window resize

Question

I am using the following jQuery to move content from the top of the main content column in mobile view to the top of the sidebar when in desktop view.

if (ww >= 768) {
  $( '#move-me' ).insertBefore($( '#top-widget' ) );
}

Here's a fiddle: http://jsfiddle.net/richerimage/co6nw6va/1/

This works fine on page load, but I'd like the content to be able to move back and forth on window re-size

Like all things, I guess this is easy if you know how! :)

Any help is greatly appreciated

With thanks

Richard

p.s. also, is there a way to move the content to the top of the #sidebar without the need to reference the #top-widget?

Answer 1

Try this:

$( document ).ready(function() {
    doThis();
});

$( window ).resize( function() {
    doThis();
});

function doThis(){
    var ww = document.body.clientWidth;
    if (ww >= 768) {
        $( '#move-me' ).insertBefore($( '#top-widget' ) );
    }else{
        $( '#move-me' ).insertBefore($( '.post_content' ) );
    }
}

Check JSFiddle Demo