How to move a child element from one parent to another parent, and place it in a specific location on mobile resize?

Lets say I have this 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>

On mobile ONLY, I want to move bottomExcerpt from wrapper and place it in wrapperTwo after smallhyperlinks and before picture.

So basically the structure of wrapperTwo on mobile(580) will be smallhyperlinks -> bottomExcerpt -> picture.

How can I do this using jQuery?

I tried the following, but it doesn’t work properly:

$(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'); 
    }
});

For some reason, bottomExcerpt is showing up below picture, but I want it to show between smallhyperlinks and picture. How can I fix this issue?