Создать динамический div Razor MVC

Я хочу создать динамический div.

У меня есть список продуктов, максимум 3 из которых могут быть в одной строке "col-xs-4", но если это 4 продукта, я хочу 3 с "col-xs-4", а 4-й с "col-xs-12" чтобы заполнить всю строку. Если у меня есть 5 продуктов, я хочу 3 с "col-xs-4" и 2 других с "col-xs-6".

Я думал о зависимости от количества предметов, которые я установил для класса

<div class="flippersContainer">
<div class="container">
    <div class="col-xs-12">
        @{
            var children = Model.Content.Children.ToList();
            if (children.Any())
            {
                foreach (var item in children.OfType<RedButtonItem1>())
                {
                    string imagePath = string.Empty;
                    if (!string.IsNullOrEmpty(item.Image))
                    {
                        var itemImage = Umbraco.TypedMedia(item.Image);
                        imagePath = itemImage.GetCropUrl(80, 160);
                    }
                    {
                        string colCSS = string.Empty;
                        var productNumber = children.OfType<RedButtonItem1>().Count();
                    }

                    <div class="col-xs-4">
                        <div class="front-two">
                            <div class="flipperAllFront">
                                <div class="big-button">
                                    <img class="img-responsive" src="https://www.atlantico.ao/SiteCollectionImages/PARTICULARES/ContaGlobal/Atlantico-Conta-Global-375X178.jpg">
                                    <div class="productTitle">
                                        <span>@item.Title</span>
                                    </div>

                                    <div class="productText">
                                        <span>@item.Description</span>
                                    </div>
                                    @{
                                        if (item.CallToAction != null && item.CallToAction.HasValues)
                                        {
                                            var linkUrl = (item.CallToAction.First.Value<bool>("isInternal")) ? (item.CallToAction.First.Value<int?>("internal").HasValue ? Umbraco.NiceUrl(item.CallToAction.First.Value<int>("internal")) : string.Empty) : item.CallToAction.First.Value<string>("link");
                                            var linkTarget = item.CallToAction.First.Value<bool>("newWindow") ? "_blank" : null;

                                            @:<a role="button" href="@linkUrl" target="@linkTarget">
                                    }
                                        else
                                        {
                                            @:<a class="link-big-button" role="button" data-parent="#accordion" href="#@item.Id">
                                        }
                                        @:</a>
                                    }
                            </div>
                        </div>
                    </div>
                </div>
                                            }
                                        }
        }
    </div>
</div>

Thanks in Advance