detach and insert after

detach and insert after

My goal is to remove 2 sections if someone resizes a window to less than 647px and re-add them if they resize to at least 647px. The code I have to remove the sections has worked great, but adding them again is not going so well. I cannot do this with a media query because of a plugin I'm using. Here is what I have so far:

  1.     // CHECKS WINDOW SIZE AND ADDS/REMOVES MUSIC & PHOTOS
  2.     var $window = $(window);
  3.     var $pane = $('#pane1');

  5.     function checkWidth() {
  6.         var windowsize = $window.width();
  7.         if (windowsize < 647) {
  8.             //if the window is greater than 647px wide then turn on jScrollPane..
  9.             $(".section-music, .section-photos").each(function() {
  10.                 $(this).detach();
  11.             });
  12.             $.scrollify.update();
  13.         }
  14.         if (windowsize >= 647) {
  15.             //if the window is greater than 647px wide then turn on jScrollPane..
  16.             $(".section-music").insertAfter(".section-about");
  17.             $.scrollify.update();
  18.         }
  19.     }
  20.     
  21.     // Execute on load
  22.     checkWidth();
  23.     // Bind event listener
  24.     $(window).resize(checkWidth);
Any ideas on how I can get the sections to add again? Thanks much!