How would I split ‘desandro masonry’ columns by categories on a responsive wordpress layout

I have created a responsive ‘pinterest style’ layout on a wordpress blog. The tiles are created by the’featured images’ functionality on the admin side. So when the user adds a featured image to their blog post, the ‘featured image’ will display on the home page integrated into a responsive masonry layout. so the effect on the homepage is a gallery of tiled images which act as blog post teasers. The images have a width of 100% within their respective column and a height of auto, so they retain their aspect ratio. On mobile the layout is single column, on tablet the layout is two columns wide and over 900px the layout is 3 columns wide. Bssically it works like this example http://tympanus.net/Development/GridLoadingEffects/index2.html but with ‘featured images’ which link through to their post.

I have 2 categories set up on my blog, let’s say A and B. Within the layout described above … On desktop view columns at 33.3% I would like the first column on the left to be populated with category A and the remaining 2 to be populated by category B and then on mobile where the column is single … I would like the layout to be a default Masonry split, which would display alternate categories post thumbnails as you scroll down.

Does anyone have any idea on how this could be achieved … or even if it can be achieved with Masonry?

here are a few snippets of the current setup

**//footer.php**

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/masonary.js"></script>
<script type="text/javascript">
<script type="text/javascript">
//Script to initialise Masonary
var content = document.getElementById('content');
var msnry = new Masonry( content );
imagesLoaded( content, function() {
    var msnry = new Masonry( content );
    console.log('all images are loaded');
    msnry.layout();
});
</script>

**//index.php - loop snippet**
<!-- Masonary content -->
<div class="masonry js-masonry" id="content">

                <!-- Start the Loop. -->
                <?php 
                // If have posts
                if (have_posts()) :

                // Loop through the post
                while (have_posts()) : the_post(); ?>

    <!-- This adds the thumnails to the loop -->
    <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
        <!-- Masonry Item -->
         <div class="item">
            <!-- Overlay hover effect -->
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
                <span class="post-overlay clearfix">
                    <!-- Post title to appear on hover -->
                    <h2 class="overlay"><?php the_title(); ?></h2>
                    <!-- Post Thumbnail to appear in Masonry grid -->
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                    <?php endif; ?>
                </span><!--End of hover-title-->
            </a>
        </div><!--End of item-->

        <!-- End the while loop -->
                <?php endwhile;?>

</div><!--End of .masonary-->

**//style.css   - masonry css snippet**
img { 
  max-width: 100%; 
  height: auto !important; 
}

**//mobile**
.masonry {
  height: 100%;
  min-height: 100%;
}

.masonry .item {
  position: relative;
  width:  100%;
  float: left;
  padding: 15px;
}

**//tablet**
.masonry .item {
        width:  50%;
    }

**//Desktop**
.masonry .item {
        width:  33%;
    }

thanks in advance 🙂