How to stretch the last column to fill the whole width?

I have a grid that displays from 1 to 4 panels in columns. Currently I'm doing the following:

<div class="row">    @{        var colmd = 3;        var col = 12;        var count = myPanels.Count;        if (count == 1)        {            colmd = 12;            col = 12;        }        else if (count == 2)        {            colmd = 6;            col = 12;        }        else if (count == 3)        {            colmd = 4;            col = 12;        }    }    @foreach (var panel in myPanels)    {<div class="col-md-@colmd col-@col"><DynamicComponent Type="@(panel.Type)" /></div>    }</div>

This is quick and dirty and it's also not doing what I expect.

On smaller screens I need to display the panels as follows:

• When 1 panel, then its col should be 12
• When 2 panels, then both should be 6
• When 3 panels, 2 should be 6 and the last should be 12
• When 4 panels, all 4 should be 6

Is it possible to achieve this using just css/bootstrap or do I need to hardcode each combination?