Only on mobile break point, how to move a child element from one parent to another parent, and insert it at a particular location?

Let’s say I have this HTML(below) and it can not be changed. Using jQuery, I’m having some issues moving the child element bottomExcerpt from parent wrapper , to wrapperTwo.

On mobile, I want to move bottomExcerpt element and place it underneath smallhyperlinks and before picture. So basically, bottomExcerpt will be the middle element between smallhyperlinks and picture.

But for some reason on mobile, bottomExcerpt is getting moved underneath the picture but it should move underneath smallhyperlinks. The picture should be the last element, not bottomExcerpt.

On Mobile, what it is currently displaying as : smallhyperlinks -> picture -> bottomExcerpt

But it should display as: smallhyperlinks -> bottomExcerpt -> picture

I have shared my JS code below. Am I missing something in the code?

JS

$(window).resize(function () {
    if ($(window).width() < 580) {
        $('.wrapperTwo .picture').insertAfter('.wrapperTwo .smallhyperlinks');
        $('.smallhyperlinks h2').removeClass('hidden');
        if ($('.wrapper .bottomExcerpt').length > 0) {
            $('.wrapper .bottomExcerpt').insertAfter('.wrapperTwo .smallhyperlinks');
        }
    } 
    else 
    {
        $('.wrapperTwo .smallhyperlinks').insertAfter('.wrapperTwo .picture');
        $('.smallhyperlinks h2').addClass('hidden'); 
    }
});

HTML

<div class="wrapper">
    <div id="wrapperItems" class="container">
        <div class="row belowContent">
            <div class="favoriteContainer"></div>
            <div class="bottomExcerpt">
                <p>HTML links are hyperlinks. You can click on a link and jump to another document.</p>
             </div>
        </div>
    </div>
</div>

  
<div class="wrapperTwo">
    <div id="wrapperItemsTwo" class="container">
        <div class="row belowContent">
            <div class="picture">
                <div class="symbol"></div>
             </div>
             <div class="smallhyperlinks">
                <h2 class="hidden">H2 Text</h2>
             </div>
        </div>
    </div>
</div>