为什么 insertBefore 在给定条件之前交换元素

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);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="container-fluid">
          <div class="row">
              <h1 class="block-title">what we do?</h1>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 style-block" style="padding-left: 0 !important;">
          <div class="img-holder">
              <a href="https://placeholder.com">
                  <img class="empty-img" src="http://via.placeholder.com/560x560">
              </a>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 offset-lg-1 offset-xl-1 description" >
          <div class="about-project">
              <div class="project-title">
                  <h4 class="title">creative</h4>
                  <h1 class="bold-title">kitchen</h1>
              </div>

              <div class="project-content">
                  <p>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?</p>
                  <p>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?</p>
              </div>
              <div class="project-btn-holder">
                  <button class="learn-more">
                      <a href="/">Learn more</a></button>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="container art-projects">
  <div class="row swap-block">
      <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 description swap-element no-padding">
          <div class="art-project">
              <div class="art-project-title">
                  <h4 class="art-title">art</h4>
                  <h1 class="art-bold-title">installation</h1>
              </div>

              <div class="art-project-content">
                  <p>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?</p>
                  <p>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?</p>
              </div>
              <div class="art-project-btn-holder">
                  <button class="art-learn-more">
                      <a href="/">Learn more</a>
                  </button>
              </div>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 offset-lg-1 offset-xl-1 style-block swap-el" style="padding-right:0!important;">
          <div class="art-img-holder">
              <a href="https://placeholder.com">
                  <img class="art-empty-img" src="http://via.placeholder.com/560x560">
              </a>
          </div>
      </div>
  </div>
</div>
<div class="container design-projects">
  <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 style-block" style="padding-left: 0 !important;">
          <div class="design-img-holder">
              <a href="https://placeholder.com">
                  <img class="design-empty-img" src="http://via.placeholder.com/560x560">
              </a>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 offset-lg-1 offset-xl-1 description">
          <div class="design-project">
              <div class="design-project-title">
                  <h4 class="design-title">print</h4>
                  <h1 class="design-bold-title">design</h1>
              </div>

              <div class="design-project-content">
                  <p>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?</p>
                  <p>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?</p>
              </div>
              <div class="design-project-btn-holder">
                  <button class="des-learn-more">
                      <a href="/">Learn more</a>
                  </button>
              </div>
          </div>
      </div>
  </div>
</div>