Как изменить код HTML в зависимости от ширины экрана?

это конечно можно, но зачем? я уверен, что вам нужно сделать по-другому (css-медиазапросы например)

"css media queries"
можно конечно шаманить на js'е, но зачем?

Вроде подробно расписала же, ну уж css'ом я бы и сама справилась.. не ну может чего то не догоняю, ну подскажите решение на стилях, пример есть.

poniyur, ваша уверенность внушает доверие, не подскажете ли решение.
Вот есть блок фильтров, формирует больше 1000 записей, (дважды его выводить для мобилок и десктопов на странице не вариант, надо формировать один раз) далее нужно на мобилках прятать его в канвас фреймворка, для этого нужно вложить его в два div'а.

<div id="offcanvas-nav-primary" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar uk-flex uk-flex-column">
             [[+filters]]
</div>
</div>

bxspb пример медиазапроса
При ширине окна браузера меньше чем 1200px применятся стили, которые я указал, например, элемент с id "content" примет display: none (исчезнет с экрана)
Вам нужно будет лишь прописать свои стили

@media screen and (max-width: 1200px) {
  #content {
    display: none;
  }
}

poniyur, вы не внимательно прочитали вопрос, стили применятся ко всем вложенным тегам. Мне не нужно скрывать элемент, мне нужно при определенной ширине экрана вкладывать элемент в другой.

bxspb, а не, вопрос я нормально прочитал.
Я просто не понял, зачем это.
Если вам нужно в зависимости от ширины экрана менять стили элемента, то используйте медиазапросы.
Ради этого менять вёрстку на стороне клиента через js - не очень правильно (хотя бывает, что без этого никак).

bxspb, что вам даст вкладывание одного элемента в другой, может и правда без вкладывания никак, расскажите

Можете вложить блок фильтров в 2 div'а сразу? Это как-то мешает десктопной версии?

poniyur, да, эти два дива формируют канвас, js обработчик повешан на их id, соответственно в десктопоной версии блок выступает в роли части верстки страницы, в мобильной он вкладывается в родительский канвас контейнер.

Правильным решением будет определить разрешение (тут вам уже показали как). Далее при мобильном разрешении

myFilter = UIkit.offcanvas(element, options);
(инициализации, из оф доки по uikit)

При изменении разрешения на декстоп

myFilter.$destroy()
(удаляем)

Опять же, если изучить поведение, вероятнее всего uikit через js управляет стилями (добавляет удаляет как классы так и инлайн стили), то есть куда менее... дешёвый костыль (чем оборачиваете в дивы) - это обнуление этих стилей для декстопа, но это только если там не будет в инлайн таких вещей как position: fixed и т. п.