Почему insertBefore меняет элементы местами до поставленных условий

#javascript

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

Как видно, есть 3 бутстраповских блока: простой container , container art-projects
и container-design-projects. 

Я написал скрипт, который меняет местами два элемента: swap-element и swap-el второго
блока art projects при ширине меньше 990 пикселей.

Проблема в том что они меняются еще до 990 пикселей (начиная 1005 пикселей), а это
ломает мою верстку.

Вот ссылка на codepen.

Помогите, а то запутался, почему же так происходит?



document.addEventListener("DOMContentLoaded", ()=> {
    let w = document.documentElement.clientWidth;
    if (w < 990) {
        swapElements();
    } 
    if (w >= 990){
        preventDefaultSwap();
    } 
})

window.onresize = () => {
    let w = document.documentElement.clientWidth;
    
        if (w < 990) {
            swapElements();
        } 
        if(w >= 990) {
            preventDefaultSwap();
        }
}
swapElements = () => {
    let swapElement = document.querySelector(".swap-element");
    let swapElementSecond = document.querySelector(".swap-el");
    let swapBlock = document.querySelector(".swap-block");

    swapBlock.insertBefore(swapElementSecond, swapElement);
}
preventDefaultSwap = () => {
    let swapElement = document.querySelector(".swap-element");
    let swapElementSecond = document.querySelector(".swap-el");
    let swapBlock = document.querySelector(".swap-block");

    swapBlock.insertBefore(swapElement, swapElementSecond);
}


  

      

          

              
what we do?
          
      
      

          

              
                  
              
          
      
      

          

              

                  
creative
                  
kitchen
              

              

                  
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita,
culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore.
Maiores facilis  accusamus voluptatum nemo eius?
                  
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita,
culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore.
Maiores facilis   accusamus voluptatum nemo eius?
              
              

                  
              
          
      
  



  

      

          

              

                  
art
                  
installation
              

              

                  
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita,
culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores
facilis accusamus voluptatum nemo eius?
                  
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita,
culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores
facilis accusamus voluptatum nemo eius?
              
              

                  
              
          
      
      

          

              
                  
              
          
      
  


  

      

          

              
                  
              
          
      
      

          

              

                  
print
                  
design
              

              

                  
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita,
culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores
facilis accusamus voluptatum nemo eius?
                  
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita,
culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores
facilis accusamus voluptatum nemo eius?
              
              

                  
              
          
      
  




    

Ответы

Ответ 1

Scrollbar не является частью document.documentElement, он находится внутри окна,
поэтому ширину надо тоже брать у окна: window.innerWidth