Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Изменение порядка следования адаптивных блоков в макете</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> .col-xs-6 { text-align: center; font-size: 40px; font-weight: 300; color: #fff; } .col-xs-6:nth-child(1) { background-color: #673d99; } .col-xs-6:nth-child(2) { background-color: #984807; } .col-xs-6:nth-child(4) { background-color: #022f5f; } </style> </head> <body> <div class="container"> <h1 class="h3 text-center" style="margin-top: 30px; margin-bottom: 30px;">Пример адаптивного макета, построенного с использованием Bootstrap 3</h1> <div class="lead text-center" style="margin-bottom: 16px;"> Текущая контрольная точка: <span class="visible-xs-inline">XS</span> <span class="visible-sm-inline">SM</span> <span class="visible-md-inline">MD</span> <span class="visible-lg-inline">LG</span> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-6" style="height: 200px;"> #1 </div> <div class="col-xs-6" style="height: 150px;"> #2 </div> <div class="clearfix"></div> <div class="col-xs-6" style="height: 150px;"> #3 </div> </div> </div> </body> </html>