jQuery onresize function

Onresize not working properly.

HTML

<div id="place-holder"></div>
<div id="sidebar">
    <div class="dummy-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="dummy-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="dummy-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>
<div id="main-content"></div>

CSS

#sidebar {
    border:1px solid red;
    float: left;
    margin-right: 5px;
    width: 100px;
    height: 500px;
}
.dummy-content {
    background: #ccc;
    padding: 0 5px;
    margin: 0 5px 0 5px;
}
#main-content {
    border: 1px solid green;
    float: left;
    width: 650px;
    height: 500px;
}
#place-holder {
    border: 1px dashed blue;
    margin-bottom: 5px;
    width: 755px;
    height: 100%;
}

JavaScript

$(function () {
    var $window = $(window);
    var $sideBarContent = $('#sidebar .dummy-content');
    var $placeHolder = $('#place-holder');

    // Clone content at start - then hide it 
    $sideBarContent.clone(true).appendTo($placeHolder);

    // Bind event listener and do initial execute
    $window.resize(function(){
        $placeHolder.toggle($window.width() >= 768)
    }).trigger("resize");
});