Как сверстать адаптивно?

Question

[Алмаз]

Здравствуйте! Я опытный в таких делах, но решил все же посоветоваться.

Мне нужно сверстать данный блок адаптивно, но возникает проблема при его верстке.
Я сделал для полного разрешения, но при меньших размерах два последних блока должны съезжать ниже описания.
Конечно можно это сделать при помощи display: table, но при этом данный блок не будет плавно скрываться по нажатию кнопки. А так как сделано сейчас не получится сместить два последний блока в ниже, ибо контейнеры так не располагают. Также можно сделать все на таблицах и при определенных media скрывать td, а другие показывать, но мне кажется так не совсем правильно будет. Надеюсь понятно разъяснился! CSS не прикрепляю. ибо не вижу необходимости.

<div class="game-additionals">
                <div class="game-additional-title">
                   Дополнительная информация о <b>Batman: Arkham Knigh</b>
                    <span class="active" id="hide-additional-game">Скрыть&nbsp;<i class="fa fa-arrow-up"></i></span>
                </div>
                <div class="game-additional-content">
                    <div class="game-additional-outside">
                        <div class="game-additional-inside">
                            <div class="game-additional-part width-add-one">
                                <div class="game-additional"><b>Альтернативное название:</b> Batman: Рыцарь Аркхема</div>
                                <div class="game-additional"><b>Жанр:</b> Экшен / Приключения</div>
                                *******
                            </div>
                            <div class="game-additional-part width-add-two">
                                <span>Рейтинг ****</span>
                                <div class="game-rating">
                                    <div class="game-rating-inside">
                                        <span class="rating">10</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="game-additional-part width-add-three">
                            <span>Пользовательский рейтинг</span>
                            <div class="game-rating">
                                <div class="game-rating-inside">
                                    <span class="rating">10</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

[Алмаз]

Придется сделать так:

<table>
    <tr>
        <td></td>
        <td class="desktop"></td>
        <td class="desktop"></td>
    </tr>
    <tr class="mobile">
        <td></td>
        <td></td>
    </tr>
</table>

При определенных media скрывать один из классов, а другой показывать. Плохо то, что довольно много раз дублируется информация.
Можно это сделать и на div'ах. Кому как удобнее.

Answer 2

[Павел]

я когда встречаются супер сложности с видом на мобайл девайсах думаю как вообще должно выглядеть сие творение. После, не выдумываю костыль , а довожу до того вида который должен быть. К примеру меню в бутстрапе , если оно не влазит в экран применяется класс collapse .
Отталкивайтесь от удобства , а не от оригинала для широких мониторов

Answer 3

[Сергей Карвасарный]

используй media screen когда блоки нужно скинуть в низ так где текст сделай ему width: 100%, а тем 2 блокам 50% и они перескочат в низ и все.

Comments

[Алмаз]

Присмотритесь внимательнее к разметке, такого не выйдет.

[Александр Гамов]

Алмаз: В подобных случаях, лучше выкладывать куски кода на площадки с онлайн редактором, сложновато такие конструкции в голове держать )

[Алмаз]

Александр Гамов: Об этом я что-то совсем не подумал... В следующий раз так и сделаю!