There are 3 blocks, they all stand in a row. When resizing a certain resolution, you need to take the center block and place it forward, the other two under it, in this way.

alt text

Is it possible to do this without flexbox?

  • Create a separate style sheet for mobile devices and try to experiment in it. - Roman Sokolov

2 answers 2

The problem was solved by the bootstrap mesh:

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-sm-push-4"> <div class="content red">1</div> </div> <div class="col-xs-6 col-sm-4 col-sm-pull-4"> <div class="content">2</div> </div> <div class="col-xs-6 col-sm-4"> <div class="content">3</div> </div> </div> </div>

    Very dirty, but http://jsfiddle.net/x0sfmw38/1/