Deadzone for CSS breakpoints outside of Chrome Developer Tools

Question

I'm still relatively new too front end design so I'm not sure what's causing this. This is my Third portfolio website and the issue occurred with my second website as well.

I'm using jQuery to swap the positions of two div's when the viewport width hits 480px

HTML:

  <div id="multipleBoxesHeadliner">
                        <div id="multipleBoxesHeadlinerText"><h4>APHEX TWIN<span class="glyphicon glyphicon-asterisk"></span><br>
                                FIELD DAY 2017 HEADLINER</h4>
                        </div>
                        <p>28/11/2016</p>  
  </div>
  <div id="multipleBoxesHeadlinerPic"></div>

CSS:

      .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 35vh;
    background-color: white;
    -ms-flex-item-align: end;
    align-self: flex-end;
    position: relative;
    -ms-flex-preferred-size: 24%;
    flex-basis: 24%; }
    .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner #multipleBoxesHeadlinerText {
      height: 30vh; }
    .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner p {
      position: absolute;
      left: 0;
      bottom: 0; }
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadlinerPic {
    height: 35vh;
    -ms-flex-preferred-size: 24%;
    flex-basis: 24%;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-right: 1%;
    background-image: url(../images/headlinerPic.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }

CSS Media Query:

    @media screen and (max-width: 480px) {
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    margin: 0% 12% 1% 12%; }
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadlinerPic {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    margin: 1% 12% 0% 12%; } }

jQuery:

    //Swap positions of two divs on window resize
    $(window).resize(function(){
        if($(window).width() <= 480){
            $("#multipleBoxesHeadliner").insertAfter("#multipleBoxesHeadlinerPic");   
        }
        else if($(window).width() >= 480){
            $("#multipleBoxesHeadlinerPic").insertAfter("#multipleBoxesHeadliner");
        }
    });

Here are two gifs which display what's happening:

Working in Chrome Developer Tools:

Not working in the regular browser window:

Anyone have any idea what's causing this? Happens in all browsers.

Languages/Tools Used: HTML/CSS/Javascript/jQuery/Bootstrap/SASS

Answer 1

The scrollbars. window.width consider the width of the visibile elements including the scrollbar, while CSS media queries exclude them.

Try with innerwidth instead

$(window).resize(function(){
    if($('body').innerWidth() <= 480){
        $("#multipleBoxesHeadliner").insertAfter("#multipleBoxesHeadlinerPic");   
    }
    else if($('body').innerWidth() >= 480){
        $("#multipleBoxesHeadlinerPic").insertAfter("#multipleBoxesHeadliner");
    }
});

bear in mind innerWidth will only work for the body element, if you need to know the inner width of other elements (for instance, some element with internal overflow scrollbars) you can use .prop("clientWidth") and .prop("scrollWidth") instead