Вертикальное выравнивание по центру для столбцов (бутстрап)

Question

Я пытаюсь выполнить выравнивание по центру/вертикальное выравнивание для столбцов внутри строки. Итак, вот мой код :)

Bootstrap использование.

FIDDLE

Я пытался использовать что-то вроде этого

#row-contact { 
display: flex; 
align-items: center; } 

Но это, кажется, не правильно работает на мобильном телефоне - столбцы не складываются.

Так что, может быть, кто-то может мне помочь и знать, что я должен изменить на свой код.

Он также должен работать на мобильных устройствах.

Answer 1

В дополнение к попытке код:

#row-contact { 
    display: flex; 
    align-items: center; 
} 

Что вам нужно сделать, это добавить медиа-запрос для небольших устройств, превращающий строки в block элемента (которые занимают 100% ширины по умолчанию) , Я пошел с шириной 600px здесь, но вы можете отрегулировать по ширине, которую вы хотите строки в стек поверх друг друга:

@media screen and (max-width: 600px) { 
    #row-contact { 
    display: block; 
    } 
} 

Я создал скрипку, демонстрирующая этот here.

Надеюсь, это поможет! :)

Answer 2

Это похоже на настольную версию на мобильном телефоне? Если да, то вы, возможно, забыли:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

В вашем заголовке HTML.