Комплексная сетка с Bootstrap 3.3.7 (не обновляется) и не работает центр / середина

Question

Я использую Bootstrap 3.3.7 и пытаюсь создать сетку с макетом, который выглядит следующим образом:

Проблемы центрируют изображение / текст по центру / середине столбца /rows.

• Джон Доу по центру в первом столбце
• Джейк, Билли, Уилл будет установлен в середине левого поля со списком.

Однако это выглядит так:

Я попробовал следующее без удачи :

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

.vertical-align {
    display: block;
    vertical-align: middle;
}

.align-items-center {
    -ms-flex-align: center;
    align-items: center;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.positionMe {
    position:center;
}

Вот мой рабочий макет:

<form class="container">
        <div class="row table-bordered col-md-12">
            <div class="col-md-6">
                <div class="col-md-2">
                    <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 80px;" />
                </div>
                <div class="col-md-4 h4">Jon Doe</div>
            </div>
            <div class="col-md-2 top" align="center">
                <label class="control-label">Years Worked</label>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-4" align="left">
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class="col-md-6 h5">Jake Johnson</div>
                </div>
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class="col-md-6 h5">Billy Jack</div>
                </div>
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class="col-md-6 h5">Will Franklin</div>
                </div>
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class=" col-md-6 h5">Jack Thomas</div>
                </div>
            </div>
        </div>
    </form>

Я не могу заставить этот макет работать так, как мне нужно, что я делаю не так?

ОБРАТНАЯ СВЯЗЬ : Если этот сценарий / вопрос может быть улучшен, пожалуйста, дайте мне знать.