Prepend based on window size

Question

Basically, I want an element on the page moved into another when the screen size is above a certain threshold, but left, or put back, where it originates if it's under that threshold.

So far I've only been able to get it to prepend if above, but not reset the element if it's below it.

Here is a fiddle http://jsfiddle.net/n4qDv/

$(window).resize(function() {

if ($(window).width() < 782){
    $("#cat_con").prependTo("#meta");
}

else {  }

});

 $(window).trigger('resize'); 

Answer 1

It would be much better if you provide a jsfiddle or something. Better the HTML where your #cat_con lies. But nevertheless you can use a parent div to wrap it around and append #cat_con back to it in you else block like this.

suppose HTML is

 <div id="wrapper">
    <div id="cat_con">Your content</div>
 </div>

Now do something like this in your js

if ($(window).width() < 782){
    $("#cat_con").prependTo("#meta");
}

else { 
     $("#cat_con").appendTo("#wrapper");
 }
    

UPDATE: I have updated the jsfiddle it works

http://jsfiddle.net/n4qDv/1/

$(window).resize(function() {
    console.log($(window).width());
    if ($(window).width() < 782){
        $("#cat-con").prependTo("#meta");
    }
    
    else { 
      $("#cat-con").prependTo("#cat-wrapper");
    }
  });

HTML

<header id="header">
    <h1>Title</h1>
    <div id="cat-wrapper">
      <div id="cat-con">Categories</div> 
   </div>
</header>

<div id="meta">
   <h1>Sibear Content</h1>
</div>

Answer 2

Try this one:

$(window).on('load resize', function() {

if ($(window).width() < 782){
    $("#cat_con").prependTo("#meta");
}

else {  }

});