как использовать другой шаблон ветки в зависимости от точки останова

Как иметь возможность использовать разные шаблоны веток в зависимости от области просмотра или иметь переменные ветки, которые дают информацию?

Примером было использование основных липких классов на шаблонах веток. Липкость создавала беспорядок в мобильном представлении.

 <div id="sidebar-first" {{ create_attribute({'class': sidebar_first_classes }) }} data-sticky-container>
              <div class="sticky" data-sticky data-top-anchor="sidebar-first:top" data-btm-anchor="main:bottom">
                {{ page.sidebar_first }}

Пришлось как-то удалять классы с помощью JS:

 функция раскрытьбоковую панель () {
    константная боковая панель: HTMLElement | null = document.querySelector('.sidebar-first');
    константа липкая: HTMLElement | null = document.querySelector('.sticky');
    если (боковая панель != ноль) {
      // Липкость ne doit pas être opérante sur mobile
      если (липкий != ноль) {
        в то время как (sticky.attributes.length > 0) sticky.removeAttribute(sticky.attributes[0].name);
        липкий.classList.remove('липкий');
      }
      sidebar.style.display = 'блок';
      sidebar.style.height = '320px';
      sidebar.classList.remove («липкий контейнер»);
    }
    const reject = document.querySelector('.reveal-button') as HTMLElement;
    выявить.style.display = 'нет';
  }