Jquery ready function and problems with media queries

yesterday i have faced a problem
i had  to make a design responsive according to a psd
i've found that some blocks that were injected by jquery thanks to

$(".yourdiv").append(.....)

jQuery(function(){

if($window.width()<768)

{

     $("#mydiv").appendTo("#block1");

}else{

         $("#mydiv").appendTo("#block2");

}

}

and mydiv had two styles

@media screen and (max-width: 767px){

    #mydiv STYLE1

}

@media screen and (min-width: 768px){

    #mydiv STYLE2

}

i found that mydiv had the style 2 and was the child of block 1 which is incorrect for me

finally it was wrong to use jQuery(function(){} which fires before application of media queries
i've used modernizr library
with this hack

(function($){

    function doneResizing() {

        if(Modernizr.mq('screen and (max-width:767px)')) {
                     $("#mydiv").appendTo("#block1");
        }

        else if(Modernizr.mq('screen and (min-width:768px)')) {
                                  $("#mydiv").appendTo("#block2"); 
        }

    }

    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
})(jQuery);

 

that's all