VA_ic2b

flex align-items: center работает. На выравнивание текста определенного шрифта в ячейке влияют и другие свойства: свойства, наследуемые от родителей, тип отображения (display) и line-height, которые у вас не задано явно. Отсюда и разное отображение

То, что вы называете заменой и есть адаптивная верстка.
Создайте в описании сразу все блоки, и для десктопов, и для мобильных.
В css для десктопов на блоки для мобильных поставьте свойство display : none.
И наоборот. Например:
media only screen and (max-width: 760px) and (orientation: portrait) {
.desktop_block {display:none}
}

Проще в расчетах вашего макета использовать css box-sizing : border-box
Почитайте например : htmlbook.ru/css/box-sizing

Для Вашей задачи css-решение является наиболее экономичным. Для row-fluid используйте table-row, для span - table-cell в случае десктопа. Для мобильных гаджетов в таблице стилей задайте блочное определение этих элементов. Чтобы описать ситуацию более конкретно нужен сценарий Вашего адаптивного дизайна - что как трасформируется в зависимости от ширины экрана гаджета.

Родительскому элементу, содержащему блок с текстом и блок с "картинкой" задайте свойство display: table-row. Дочерним блокам - свойство display: table-cell.
При этом не забудьте указать ширину дочерних блоков (в сумме 100% родителя).
А уж теперь background-size: cover

Выбор движка (CMS) должен исходить из функциональности сайта, а не из дизайна. То, что Вы хотите реализуется посредством шаблона. Если дизайн уже есть, шаблон сделать недолго. Если опишете функционал и структуру сайта помогу определиться с CMS и шаблоном.