Repositioning / moving divs with jQuery

I’m starting out with divs arranged the following way. Two divs, main-top and main-bottom start out hidden and I want them to appear after they’ve been moved into the right spot. I want to move main-top to appear after header, and move main-bottom to appear before footer, and after they’re moved, show the divs. How do you move these divs with jQuery? The final order should be header, main-top, main-bottom, footer

<div id='main'>

    <div id='main-top'>Main Top</div>
    <div id='main-bottom'>Main Bottom</div>

    <div id='header'>Header</div>

    <div id='footer'>Footer</div>

</div>

<style>
    #main-top {display: none;}
    #main-bottom {display: none;}
<style>

<script>
    //*Move 'main-top' to appear after 'header'*
    $('#main-top').show(); // Show div after it's moved

    //*Move 'main-bottom' to appear before 'footer'*
    $('#main-bottom').show(); // Show div after it's moved
</script>

Answer

You can use insertBefore and insertAfter funstions

$('#main-top').insertAfter('#header').show();
$('#main-bottom').insertBefore('#footer').show();
#main-top {display: none;}
#main-bottom {display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
    <div id='main-top'>Main Top</div>
    <div id='main-bottom'>Main Bottom</div>
    <div id='header'>Header</div>
    <div id='footer'>Footer</div>
</div>