Use appendto() to move div to another div but it duplicates content

I’m having problems with my code. I’m trying to move a <div> to another <div> when the browser windows is below a certain screen size but it moves all of them. For example, the code I have below:

<div class="link-attach-no-comment">
    <div class="comment-contain-left"></div>
    <div class="link-img"></div>
</div>

is suppose to look like this:

<div class="link-attach-no-comment">
    <div class="link-img"></div>
    <div class="comment-contain-left"></div>
</div>

But if I have more than of the above, it copies all of <div class="link-img"></div> and makes duplicates.

<div class="link-attach-no-comment">
    <div class="link-img"></div>
    <div class="link-img"></div>
    <div class="link-img"></div>
    <div class="comment-contain-left"></div>
</div>

How do I prevent duplicate div from copying? My JS file looks like this:

jQuery(document).ready(function($){
  $(window).resize(function() {
    if (window.matchMedia( "(max-width: 1023px)" ).matches) {
        $(".link-outside .link-attach-no-comment .link-img").clone().insertBefore(".link-outside .link-attach-no-comment");
    } else {
        $(".link-outside .link-attach-no-comment .link-img").clone().insertAfter(".link-outside .link-attach-no-comment");
    }; 
  }).resize();
});