enquire.js, как правильно переместить элемент при изменении разрешения

У меня есть блок с меню

<nav>...</nav>

И блок с кнопками

<div class = "header__btns"> 
   <button>1</button>
   <button>2</button>
</div>

, как сделать чтобы было так на ширине меньше 900px

<nav>
    ...
    <button>1</button>
</nav>
<div class = "header__btns"> 
   <button>2</button>
</div>

и вернуть обратно на ширине больше 900px

Я использую библиотеку enquire.js Вот мой код, но он работает только один раз, дальше всё ломается

function minScreen() {
    console.log('Изменения')
    navigationList.append(callBackBtn);
}
function maxScreen() {
    headerBtnBlock.prepend(callBackBtn);
}
enquire.register('screen and (max-width:1240px)', {
    match : function() {
        window.addEventListener('resize', minScreen);
    },
    unmatch : function() {
        window.addEventListener('resize', maxScreen);
    },
});