Wonky navigation search question

Trying to mess with things a bit when the mobile menu is triggered.

Right now, I have both top and left-side navigation. On mobile, I use custom jquery to append the left-side nav items into the main menu (and then remove the left sidebar), so all of the navigation is in one place.

As you might guess this can get pretty long, so what I want to do is grab the navigation search and put it as the first list item in the mobile menu.

$('.search-item').detach().prependTo('#menu-top-nav');

This has interesting behavior - it moves the <li> to the right place, BUT the <form> doesn't move with it. So when you click on the icon for search, it actually jumps you down to the bottom of the menu, where you can type in.
http://www.awesomescreenshot.com/image/438954/4fec59353fb8148ed3d9a52ec212092d - moved to the top
http://www.awesomescreenshot.com/image/438960/7d00580a85874772a8540e325e2139fd - jumped to the bottom

I noticed in the code that the <form> actually comes right after <div class="inside-navigation grid-container grid-parent">, and not along with the <li class="search-item">.

So I guess my question is, is there a way to edit this so the <form> goes along with the <li>, which would allow me to do this fun jquery switching? :)