Как расположить блоки в правильном порядке ?

Question

[nepster-web]

Столкнулся с такой проблемой, на сайте есть раздел отзывов.
Собственно на мобильной версии должно идти вот так:
Текст отзыва, а под ним стрелочки: предыдущий и следующий

А вот на разрешении по больше, должен идти текст отзыва а стрелочки по бокам.

И тут возникла проблема, как бы это и так и так сделать.
Собственно для мобильных разрешений реализация вот такая:
jsfiddle.net/omqh5vew/5

Для разрешений по больше нужно, чтобы синие квадраты были по бокам.

Конечно можно сделать вот так:

<div class="review">
    <div class="logo"><img src="images/projects/wildix/logo.png" alt="" /></div>
    <div class="previous"></div>
    <div class="next"></div>
    <div class="text">
         Текст Текст Текст Текст Текст Текст 
         Текст Текст Текст Текст Текст Текст 
         Текст Текст Текст Текст Текст Текст 
    </div>
</div>

Но не получается достичь нужного расположения блоков и там и там.

Можно ли без flexbox и js сделать так, чтобы на мелких расширениях синие квадраты были внизу, а на расширениях по больше синие квадраты были по бокам ?

Answer 1

[teotlu]

Я правильно вас понял?

Comments

[nepster-web]

да то что нужно, большое спасибо. Пошел разбирать решение.

Answer 2

[Vadim Bogomazov]

Media Queries?