Foreach output into two columns cshtml

Issue

My current code displays the output in one column ... I would like for it to display the output in two column. should I use something like flex grid or is there another way?

<div class="col-12 box-container">
     <div class="col-6">
       @foreach (var s in Model.StatusVM
       .Where(a => a.subHtmlID == x.HtmlID)
       .OrderBy(a => a.IDName)
       .ThenBy(a => a.SortOrder)
       .ThenBy(a => a.HID))
       {
           @Html.Partial("_MusicRow", s)
       }
     </div>
</div>

the current output looks like this...

item 1
item 2
item 3
item 4

<div class="col-12 box-container">
     <div class="col-6">
      <a class="status-row" href="#">item 1</a>
      <a class="status-row" href="#">item 2</a>
      <a class="status-row" href="#">item 3</a>
      <a class="status-row" href="#">item 4</a>
     </div>
</div>

trying to achieve

item 1   item 2
item 3   item 4

Solution

Using bootstrap itself (if you want to do easily).Using Nested Cols, If you pass a <div class="col-6"></div> that surrounds your partial view the result will be met.

So:

<div class="row box-container">
    <div class="col-6">
        <div class="row">

            @foreach (var s in Model.StatusVM
            .Where(a => a.subHtmlID == x.HtmlID)
            .OrderBy(a => a.IDName)
            .ThenBy(a => a.SortOrder)
            .ThenBy(a => a.HID))
            {
                <div class="col-6">
                    @Html.Partial("_MusicRow", s)
                </div>
            }
        </div>
    </div>
</div>

Answered By - Masoud Andalibi