Как центрировать столбец вертикально в режиме начальной загрузки?

Question

Я пытаюсь центрированием первого столбца в середине вертикально, для хза мобильного режима:

<div class="row toplineheight vcenteritems totalblue visible-xs"> 
    <div class="col-xs-6 vcenteritems small">Your order</div> 
    <div class="col-xs-3"> 
     <div class="col-xs-12"><span class="tiny">Upfront</span></div> 
     <div class="col-xs-12 dollar large middle">0</div> 
    </div> 

Это мой CSS (самонастройки 3):

.cart { 
    .verticalline { 
    border-left: thin solid #f7f7f7; 
    } 

На данный момент «вашего текст заказа остается в верхней части div. Как выровнять это по центру?

Codepen здесь: codepen

Answer 1

используя класс visible-xs на вашем .row элемента подменяют значение display:flex CSS. Перемещение класс содержащий элемент

CODEPEN

HTML

<div class="cart"> 
    <div class="visible-xs"> <!-- move visible-xs class to a parent container --> 
    <div class="row toplineheight vcenteritems totalblue"> 
     <div class="col-xs-6 vcenteritems small">Your order</div> 
     <div class="col-xs-3"> 
     <div class="col-xs-12"><span class="tiny">Upfront</span></div> 
     <div class="col-xs-12 dollar large middle">0</div> 
     </div> 
     <div class="col-xs-3"> 
     <div class="col-xs-12"><span class="tiny">Monthly</span></div> 
     <div class="col-xs-12 dollar large middle">0</div> 
     </div> 
    </div> 
    </div> 
</div>