I'm trying to create a layout where all 3 items are stacked evenly at col-xs, but at col-sm they must split into two columns of varying heights. See image. Basically on the 'sm' and larger screens, the left column is text (div 2), and the right column are both divs 1 and 3 (images) stacked.
I almost achieve this by using col-push-sm-4 (on div 1), and col-pull-sm-8 (on div 2), but then div 3 won't occupy the empty space and is pushed down to the bottom of div 2 instead of sitting under div 1.
I then looked to isotope to fill the empty space, but I can't get it to work with my code. 'push and pull' doesn't appear to work when using isotope, but offset moves the columns.
<!--[2 Column]-->
<div class="row masonry-grid">
<!--grid sizer-->
<div class="masonry-grid-sizer col-sm-8"></div>
<!--grid-item-->
<div class="masonry-grid-item col-xs-12 col-sm-8 col-sm-offset-4">
<!-- main image-->
<img class="img mb-20" src="img/6.jpg"/>
</div><!--/grid-item /col-md-8-->
<!--[Sidebar]-->
<div class=" masonry-grid-item col-xs-12 col-sm-4">
<p class="portfolio-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
</p>
</div>
<!--[/Sidebar]-->
<!-- image list -->
<div class="masonry-grid-item col-xs-12 col-sm-8 col-sm-offset-4">
<img class="img" src="img/1.jpg"/>
<img class="img" src="img/2.jpg"/>
<img class="img" src="img/3.jpg"/>
</div>
<!-- /image list-->
</div>
<!--/[2 Column]-->
Here is a JS Fiddle of my current state of affairs, any help would be great. Basically I need divs 2 and 3 to push up and fill the white space.
