Very long puzzled, but could not solve the problem.

As you can see, there are 3 bootstrap blocks: simple container , container art-projects and container-design-projects .

I wrote a script that swaps two elements: the swap-element and the swap-el second art projects block with a width of less than 990 pixels.

The problem is that they change up to 990 pixels (starting 1005 pixels), and this breaks my layout.

Here is a link to the codepen .

Help, and then confused, why is this happening?

 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>

  • What should be done to reproduce the problem? or is it reproduced anyway? According to the explanation it is not clear what exactly it is - Grundy
  • @Grundy Resize the screen and see that starting from 1005 pixels, the elements change places of the elements of the second block, I mean, but should start from 990 pixels. - An excess of Gophers
  • What are the specific elements? Given a very voluminous code, is it all needed to play? - Grundy
  • 2
    clientWidth does not consider scrollbar width - Grundy
  • 2
    @Grundy ahhh so that's the problem. You are a genius thank you :) - Excess Suslik

1 answer 1

Scrollbar is not part of document.documentElement , it is inside the window, so you should also take the width from the window: window.innerWidth

  • This is another thing plus - Excess Suslik