Bootstrap masonry type layout (with infinite scroll) with CSS
<p>I've got a page that is based on this css layout:</p>

<p><a href="http://www.bootply.com/jWoHaY7efR" rel="nofollow">http://www.bootply.com/jWoHaY7efR</a></p>

<p>I'm using the exact same html &amp; css as on that script for a repsonsive news feed.  </p>

<p>When on a large screen the first page loads like this: (I've selected 9 items per request from my DB in date order):</p>

<p>Item 1   Item 4    Item 7</p>

<p>Item 2   Item 5    Item 8</p>

<p>Item 3   Item 6    Item 9</p>

<p>What I' like to do is change the css on that page to display the items like:</p>

<p>Item 1   Item 2   Item 3</p>

<p>Item 4   Item 5   Item 6  etc</p>

<p>So I'm trying to do it left to right rather than in columns.    I was thinking flex-box but can't see that working now - any other suggestions please?</p>

<p>The key things are: left to right and different height items as per the script referenced above.</p>

<p>Thanks in advance for any pointers</p>