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}
}

Просто уберите мета-тег viewport из head

Поместите embed внутрь контейнера object

<script>
    var wrapper = $( ".file_upload" ),
        inp = wrapper.find( "input" ),
        btn = wrapper.find( "button" ),
        lbl = wrapper.find( "div" );
    btn.focus(function(){
        inp.focus()
    });
    btn.add( lbl ).click(function(){
        inp.click();
    });
      var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;

    inp.change(function(){
        var file_name;
        if( file_api && inp[ 0 ].files[ 0 ] )
            file_name = inp[ 0 ].files[ 0 ].name;
        else
            file_name = inp.val().replace( "C:\\fakepath\\", '' );

        if( ! file_name.length )
            return;
		
		btn.text(file_name);

    }).change();
  </script>

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

var el = определение;
el = el.replace(Что_меняем,На_что_меняем);

Используйте jquery - api.jquery.com/click

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