JQuery - 在Resize上交换内容顺序

Question

我有一种情况，我希望在某个断点处交换某些div的内容，以便文本始终显示在图像上方。

请参阅下面的codepen链接：

https://codepen.io/anon/pen/xpOvGq?editors=1010

正在执行此操作的jquery如下：

$(window).on('load',reorderOnCollapse);
$(window).on('resize',reorderOnCollapse);

function reorderOnCollapse() {

    if($('#collapse').css('display') == 'none') {

        $(".container:nth-child(even)").css("border","10px solid red");
        $(".container:nth-child(even) .image").insertAfter(".container:nth-child(even) .text");

    } else {

        $(".container:nth-child(even)").css("border","10px solid orange");  
        $(".container:nth-child(even) .text").insertAfter(".container:nth-child(even) .image");

    }

}

出于某种原因，这会产生额外的内容副本。

我认为这是因为我并没有告诉它在单个元素上执行此操作，而是适用于该类型的所有元素。

如何指定每个元素执行一次而不是全部执行？

感谢您的时间和帮助。