[Помогите] Разная структура сайта для ПК и мобильника

В общем проблема в том, что хочу сделать что бы при просмотре сайта с мобильного телефона выводилась на экран другая таблица нежели при просмотре с ПК, сделать нужно это с помощью CSS, так как доступа к HTML нету, читал про @media, но реализовать не получилось. Собственно сайт: mso-web.ru/nashi_uslugi/razrabotka_sajtov/sajt_vizitka/, на нем я указал 2 таблицы: первая для ПК, вторая для мобильного телефона.

 

Рисуете две таблицы. Потом в @media для нужного устройства/разрешения ставьте display:hidden лишнему элементу.

P.S. тупняк меня накрыл, пардон! display:none, visibility: hidden. Каюсь!

 

можно на примере, просто я как не пытался по статье про @media туда его пристроить - никак не получалось(((

 

HTML:

<div class="more"> Больше 720px</div>
<div class="less">Меньше 720px</div>

@media all and (min-width: 721px) {
    .less {
        visibility: hidden;
    }
}
@media all and (max-width: 720px) {
    .more {
        visibility: hidden;
    }
}

 

Можно так же сделать 2 версии сайта и мобилку вынести на поддомен типо m.site.com в сео это приветствуется