动态包装和拆开元素：不起作用

Question

我正在尝试通过父div包装器以不同大小的组来控制图像，从而以一种特殊的方式呈现一系列图像。

仅当浏览器等于或大于960px时，我才需要将这些图像包装在父类中，否则不要包装它们。但是，如果用户手动调整浏览器的大小，我需要能够动态删除或添加这些类。

目前这是一种工作，直到我调整浏览器的大小为止。如果包装器类已删除，则当浏览器的像素为960px或更高时，不会重新添加该包装器类。

      // look for items to be wrapped
      var elems = $(".instagram-post");

      // control the parent wrappers start positions
      var sizes = [1,2,3,2];

      // Add or removes wrapper class depending on screen width.
        function screenClass() {
            if($(window).innerWidth() >= 960) {
                for (var row = 0; row < sizes.length; row++) {
                    var wrapper = $("<div>").addClass("wrap_row_" + (row+1));
                    $(elems.splice(0, sizes[row])).wrapAll(wrapper);
                }
            } else {
                    $(".instagram-post").unwrap(".wrap_row_1");
                }
            }

        // Fire.
        screenClass();

        // And recheck when window gets resized.
        $(window).bind('resize',function(){
            screenClass();
        });