Bootstrap two columns layout like Pintrest - html

Question

I'm having trouble trying to push the containers inside my two columns layout. Right now it aligns which means that there are gaps between a container if it happens to be longer than other containers.
Here is the picture that hopefully explains it further
Below is the code of this part:
<section class="maincontent container container-fluid">
<!-- BOX 1 -->
<article class="servicestatus container container-fluid col-xs-12 col-md-6 float-md-left">
<a id="aservicestatus"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Service Status Notifications</h3>
<j:while test="${ou.next()}">
<j:if test="${ou.type!='planned'}">
<div class="statusitem">
<j:if test="${ou.type=='outage'}">
<span class="status red">Outage</span>
</j:if>
<j:if test="${ou.type=='degradation'}">
<span class="status yellow">Degradation</span>
</j:if>
<j:if test="${ou.type=='informational'}">
<span class="status green">Informational</span>
</j:if>
<h5>${ou.short_description}</h5>
<p class="subheader"><strong>Start Date</strong> <em>- ${ou.begin.getDisplayValue()}</em></p>
<p class="subheader">${ou.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<!-- BOX 2 -->
<article class="plannedoutages container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="aplannedoutages"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Scheduled Maintenance</h3>
<j:while test="${mn.next()}">
<j:if test="${mn.type=='planned'}">
<div class="outageitem">
<p class="subheader"><strong>${mn.cmdb_ci.name}</strong></p>
<p class="subheader">From: <em>${mn.begin.getDisplayValue()} - ${mn.end.getDisplayValue()} </em> </p>
<p class="subheader">${mn.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<article class="wifi container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awifi"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Wifi Information</h3>
<div class="container">
<j:if test="${bt.next() || bt.getRowCount() > 0}">
<j:if test="${bt.u_omers_company=='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
<j:if test="${bt.u_omers_company!='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
</j:if>
</div>
</div>
</article>
<!-- BOX 3 -->
<article class="windows10 container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awindows10"></a>
<div class="container">
<!--<span class="sprite icon"></span> -->
<img src="win10icon.png" width="62" height="63"/>
<h3>Exchange/Win 10 Information</h3>
<div class="container">
<p class="subheader">IT Team is pleased to announce the deployment of Windows 10 with Office Professional Plus and Outlook Exchange Online (part of the Microsoft Office 365 platform). You can get regular updates here.</p>
<p></p>
<!--<p class="subheader">For those who would like to preview it prior to receiving the Windows 10 upgrade, please click here.</p> -->
<p class="subheader">We are pleased to inform you that your Office suite has been updated to a new version (1808).</p>
<p class="subheader">This will enable new collaboration features like <B>Document collaboration and co-authoring, AutoSave for Teams and OneDrive files, Improved cell and formula bar editing</B>, etc.</p>
<p></p>
<p class="subheader">To ensure your upgrade is complete:</p>
<p class="subheader">1. <B>Close</B> all open Microsoft apps. </p>
<p class="subheader">2. <B> Relaunch</B> any Microsoft Office desktop app (e.g. Word, PowerPoint, Excel, Outlook) </p>
<p class="subheader">3. <B> Check</B> that you have the right version. Go to <B>File > Account</B>, and look under Product Information for <B>"Version 1808"</B> </p>
<p></p>
<p class="subheader">Please see full release notes here.</p>
</div>
</div>
</article>
<!-- BOX 4 -->
<article class="hoursofoperation container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="ahoursofoperation"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Hours of Operation</h3>
<j:if test="${be.next()}">
<j:if test="${be.u_omers_company=='oxford'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday to Friday – 8AM to 8PM ET</em></p>
<p class="subheader"><B>After-Hours Emergency Support: </B> <em>Monday to Friday – 8PM to 11PM ET Saturday to Sunday – 10AM to 7PM ET</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-865-8349</em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
<j:if test="${be.u_omers_company=='omers'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday – Friday 7am to 7pm ET</em></p>
<p class="subheader"><B>24/7 on call support: </B> <em>available outside of business hours (by phone only). For urgent issues requiring immediate attention, please call the Service Desk instead of emailing. Depending on volumes being handled by the team, it may take up to 24 business hours for the Service Desk to respond to emails. Outside of normal business hours, the Service Desk phone line is automatically redirected to 24/7 on call support.</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-814-6555, option 1 </em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
</j:if>
</div>
</article>
<!-- BOX 5 -->
<article class="ITsupport container container-fluid col-xs-12 col-md-6">
<a id="ITsupport"></a>
<div class="container">
<img src="/Facility_logoMobile.png" height="45px"/>
<h3>Facilities Portal</h3>
<p class="content"> From here you can submit a request relating to new office furniture, security cards, confidential shredding services or to request an ergonomic consultation.</p>
Go >
</div>
</article>
</section>