How to arrange the blocks in the correct order?

Question

css

Faced such a problem, the site has a section of reviews.
Actually, on the mobile version, it should go like this:
The text of the review, and under it the arrows: previous and next
. But on a larger resolution, the text of the review should go and the arrows on the sides.
And then the problem arose, how to do it this way and that way.
Actually for mobile resolutions, the implementation is as follows:
jsfiddle.net/omqh5vew/5
For larger resolutions, you need blue squares on the sides.
Of course you can do it like this:

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

But it is not possible to achieve the desired arrangement of blocks here and there.
Is it possible without flexbox and js to make blue squares on the bottom on small extensions, and blue squares on the sides on larger extensions?

Answer 1

Did I understand you correctly ?

Answer 2

media queries?