At a certain breakpoint, the content from 2 masonr

I am displaying the wordpress posts on my blog index page in a masonry layout. I also have the masonry activated on footer, to display the wordpress footer widgets in a masonry layout.

So basically I have 2 masonry containers on the same page.
1. One for displaying the blog posts, and
2. Other for displaying the footer widgets.

The html markup for the page looks like this:

HTML

<!-- Posts -->
<main id="main">
    <div class="testmason">
        <article class="hentry">Post 1</article>
        <article class="hentry">Post 2</article>
        <article class="hentry">Post 3</article>
        .....
        .....
        <article class="hentry">Post n</article>
     </div>
</main>

<!-- Footer Widgets -->
<div id="footer-widgets" class="footer-widgets">
    <aside class="widget">Widget 1</aside>
    <aside class="widget">Widget 2</aside>
    <aside class="widget">Widget 3</aside>
    .....
    .....
    <aside class="widget">Widget n</aside>
</div>

Following is the url where I am trying to implement this layout. -- http://lanarratrice-al-rawiya.com/lanarratrice/blog/

I dont want the masonry to load on the mobile devices.
1. I want the masonry on Posts to work only when the min width of the document is 837px.
2. Also I want the masonry on Footer to work only when the min width of the document is 880px.

Any media query lower than the above width(s) will not trigger the masonry layout, and I will display all my posts and widgets in a full width (taking up the full space available). To implement this I am using enquire js, that will trigger the masonry layout if it matches the media query. Following is my javascript:

JAVASCRIPT

// Masonry settings to organize footer widgets and blog posts
jQuery(document).ready(function($){
    var $container = $('#footer-widgets'),
        $maincontent = $('.blog .testmason');

    enquire.register("screen and (min-width:837px)", {

        // Triggered when a media query matches.
        match : function() {
            $maincontent.masonry({
                columnWidth: 200,
                itemSelector: '.hentry',
                isFitWidth: true,
                isAnimated: true
            });
        },

        // Triggered when the media query transitions
        // from a matched state to an unmatched state.
        unmatch : function() {
            $maincontent.masonry('destroy');
        }

    });

    enquire.register("screen and (min-width:880px)", {

    // Triggered when a media query matches.
    match : function() {
        $container.masonry({
            columnWidth: 400,
            itemSelector: '.widget',
            isFitWidth: true,
            isAnimated: true
        });
    },

    // Triggered when the media query transitions
    // from a matched state to an unmatched state.
    unmatch : function() {
      $container.masonry('destroy');
    }

    });
});

And finally this is my css that is being applied on this page:

CSS

#main {
    max-width: 100%;
    width: 100%;
}

.testmason {
    margin: 0 auto 35px;
}

#main article {
    margin: 0 20px 35px;
    width: 360px;
    float: left;
}

@media screen and (max-width: 854px) {
    #main { width: 100%; }

    #main .testmason {
        margin: 0 10px;
        width: auto!important;
        height: auto!important;
    }

    #main article {
        float: none;
        width: 100%;
        margin: 0 0 35px;
    }

    #main .index-box {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
        margin: 0 auto 2em;
        width: auto;
        max-width: 780px;
        max-width: 78rem;
    }

    #main .navigation {
        width: auto;
        max-width: 780px;
        max-width: 78rem;
    }
}

.index-box {
    margin: 0;
}

nav.paging-navigation {
    width: 90%;
    position: static!important;
    margin: 0 auto;
}

It seems that my javascript is working correctly, because the masonry layout is implemented. But as I resize my firefox browser window to about 846px (approx around this size), I see a broken layout. I see sometimes that the post is on top of footer. Please see this following picture attached.

To reproduce this bug you might have to shrink and expand your browser window (firefox) around 5-8 times. Sometimes if you shrink it very fast or very slow you might not see the broken layout. BTW I am using Firefox 35.0.1. Please let me know what can I do to fix this issue. Thanks.

Add the $container.masonry() function on page load too.

The issue is, it registers the event on resize, but on load it fails to calculate the body heights to calculate the positions. As these post blocks are absolutely positioned, it bleeds over footer.