Кладка, WordPress Loop и Bootstrap

Я создаю сайт WordPress, используя bootstrap, и я хочу создать раздел избранных работ на моей домашней странице, используя масонство, чтобы отображать миниатюры и названия моих трех самых последних элементов портфолио.

Я бы хотел, чтобы элементы портфолио размещались, казалось бы, случайным образом (примерно так: http://studiosweep.com/), а не просто упорядоченный формат сетки. Я не могу понять, как назначить разную ширину для моих элементов портфолио, потому что они просто генерируются в избранном рабочем разделе через цикл WordPress.

Вот мой HTML:

<section id="work">
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-6 col-sm-6 text-center">
<h1>Featured Work</h1>
</div>
</div>
<div class="row" id="ms-container">
<?php query_posts('posts_per_page=3&post_type=work'); ?>
<?php while ( have_posts() ) : the_post();
$thumbnail = get_field('thumbnail');
$medium = get_field('medium');
$size = "large";
?>

<div class="ms-item col-lg-6 col-md-6 col-sm-6 col-xs-12">
<figure>
<a href="<?php the_permalink(); ?>"><?php echo wp_get_attachment_image($thumbnail, $size); ?></a>
</figure>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

<div class="clearfix"></div>

</div>

<?php endwhile; // end of the loop. ?>
<?php wp_reset_query();

</div>

<div class="clearfix"></div>

</div>
</section>

Вот сценарий:

<script type="text/javascript">

jQuery(window).load(function() {

// MASSONRY Without jquery
var container = document.querySelector('#ms-container');

var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',
});

});

</script>

Что касается CSS, я на самом деле не знаю, как назначить различные значения ширины столбцов, поэтому пока у меня есть только это:

.ms-item {
width: 38.23%;
margin-right: 80px;
margin-bottom: 70px;
}

Любая помощь будет оценена!