Different locations for search bar depending on width

I have a problem regarding the block moving with XML. I moved the search-bar with
<move element="top.search" destination="catalog.topnav" after="-"/> which is working as needed (it´s moved into the navbar), but now for responsiveness purposes I need to move it back to its default position as for now on small devices it – logically – is moved to the sidenav (luma based).
This is obviously sth I don´t want to happen. So as far as I know there is no way of adding a condition to the default.xml so I tried some simple JS

window.onload = function() {
    if(window.width < 768) {
        document.querySelector('.header.content').appendChild(document.querySelector('.block-search'));
    }
}

but – surprise – this does not work (nothing is happening. no errors). I checked the selectors so they should be fine.
Maybe someone would be so kind to help me please. Thanks 🙂

EDIT: I removed the XML part and added the JS else part

window.onload = function() {
    if(window.width < 768) {
        document.querySelector('.header.content').appendChild(document.querySelector('.block-search'));
    }
    else{
        document.querySelector('.navigation').insertBefore(document.querySelector('.block-search'),document.querySelector('.navigation').firstChild);
    }
}

but with small devices it is still not in the default header position, but moved inside the side nav panel…

require([ "jquery" ], function($) {
    if( $(window).width() < 768 ) {
        $('.header.content').append($('.block-search'));
    }
    else{
        $('.navigation').children(":first").append($('.block-search'));
    }
});