Dynamically Arrange Bootstrap Column Horizontally in Razor

@{
    int columnCount = 1;
    int contactSerialNo = 0;
}

@foreach (var contact in ViewBag.ContactInfo.Rows)
    {
        contactSerialNo++;
        if (columnCount==1)
        {
           @:<div class="row-fluid">
        }

        <div class="span3">
            <div class="block well">
                <div class="body">
                    <h4>@contactSerialNo.ToString(). @contact["ContactName"].ToString()

                        @if (contact["CallStatusId"].Equals(DBNull.Value))
                        {
                             //Something
                        }
                        else
                        {
                            int callStatusId = contact["CallStatusId"];
                            switch (callStatusId)
                            {
                                case 1:
                                    @:<img src="@(ViewBag.Url)Assets/Icon.png" />
                                    break;
                            }
                        }

                        @if (Convert.ToBoolean(contact["PTR"]) == true)
                        {
                            @:<img src="@(ViewBag.Url)Assets/lighter.png" />
                        }

                    </h4> <br />
                    Son of @contact["FatherName"].ToString(). <br />
                </div>
            </div>
        </div>

        if (columnCount == 4)
        {
             @:</div>
             columnCount = 1;
        }
        else
        {
            columnCount++;
        }
    }

Vertically center alignment in BootStrap3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="row center" style="border:1px solid black;">
  <div class="col-sm-4" style="background-color:white;">
   test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
  </div>    
</div>


CSS

.center {  
  display:flex;
   align-items:center !important; 
   text-align:center;       
}

@media ( min-width:768px ) {
.center {
      display:flex;
      align-items:center !important;     
      text-align:center;     
  }
}

@media ( min-width: 992px ) {
   .center {     
     display:flex;
       align-items:center !important;      
       text-align:center;          
    }
}

@media ( min-width: 1200px ) {
    .center {      
       display:flex;
        align-items:center !important;      
        text-align:center;        
    }
}

CodePen