There is such a simple construction:

.container { width: 100%; max-width: 1024px; margin: 0 auto; } .block1 { width: 34%; height: 100px; border: 1px solid red; display: inline-block; } .block2 { width: 62%; height: 100px; border: 1px solid blue; display: inline-block; } @media only screen and (min-width: 480px) and (max-width: 767px) { .block1 { width: 100%; } .block2 { width: 100%; } } 
 <div class="container"> <div class="block1"></div> <div class="block2"></div> </div>

It is necessary to block2 first when reducing the screen. On bootstrap , for example, I know how to do this (push / pull), and how can I do it right?

  • 2
    Worth a look at the push/pull class in the bootstrap and do the same - Grundy
  • Ie prescribe styles theirs? This for two lines will take a ton of code, but there is no simpler option? - sagan
  • 2
    This for two lines will take a ton of code, but there is no simpler option? -here is a ton? worth seeing the implementation of the class pull or push - Grundy
  • one
    it is impossible to just swap blocks, the initial order is needed as it is .. - sagan
  • 2
    for information - Grundy

2 answers 2

You can see the implementation of the pull classes in the bootstrap and make the same classes on your own.

Bootstrap help

 // Classes .pull-left { float: left !important; } .pull-right { float: right !important; }

    This can be done using flexbox, namely the order property.