My website has a grid that is populated from a CMS, but I am unsure if the number of items will be odd or even. The design specifies 3 columns on desktop and 2 columns on mobile devices, with the last item centered if there is only one.
I currently have to programmatically check the number of items and use col-xs-6 for the last item in an even set, or col-xs-12 for the last item in an odd set.
<div class="row partners">
<div class="container">
<h1>Our Partners.</h1>
<div class="col-md-4 col-xs-6">
<div class="headshot-wrapper">
<p><img src="images/headshot.jpg" /></p>
</div>
<h2>Partnername</h2>
</div>
<div class="col-md-4 col-xs-6">
<div class="headshot-wrapper">
<p><img src="images/headshot.jpg" /></p>
</div>
<h2>Partnername</h2>
</div>
<div class="col-md-4 col-xs-12">
<div class="headshot-wrapper">
<p><img src="images/headshot.jpg" /></p>
</div>
<h2>Partnername</h2>
</div>
</div>
</div>
I'm wondering if there's a way to achieve this layout without using programming logic. It would be great if Bootstrap had "greedy" columns that automatically filled out remaining spaces in the grid.