Почему при перемещении скрипта вверх он перестает работать?
Возможно причина в том, что браузер читает сверху вниз и на момент, когда он доходит до скриптов, он уже знает о существовании вышенаписанных тегов. Если же скрипт выше тегов, то скрипт начинает выполнение сразу, не дожидаясь, когда распарсится остальная часть страницы.
Например, если JS подключить в head и написать какой-нибудь jQuery селектор, то он не найдет его и возможно возникнет ошибка. В этих случаях нужно проверять, загрузился ли документ полностью или нет, например:
$(document).ready(function() { /* наш код */ }
JQUERY первым подключите.