Bootstrap 3. Изменение порядка следования адаптивных блоков
Необходимо, чтобы блоки размещались при разрешениях от 768px как показано на схеме:
http://demchishin.ru/temp/1.png
а при меньших разрешениях - как на схеме
http://demchishin.ru/temp/2.png
Т.е., фактически, нужно, чтобы при разрешениях менее 768px блок 2 располагался между строк (<div class="row">...</div>) 1 и 3.
Использование .col-md-push-{nc} и .col-md-pull-{nc} не помогает (или я его не правильно использую). Была мысль показать в верстке блок 2 дважды (слева и между строк 1 и 3) и левый блок 2 скрывать при разрешениях < 768 с помощью hidden-xs и hidden-sm, и отображать тот блок между 1 и 3. Но в таком случае вся информация блока 2 будет подгружаться дважды, что не есть хорошо.
Возможно ли такое корректно реализовать, используя bootstrap 3? Если да, то как? Кто знает, наведите, пожалуйста, хотя бы на мысль.
Заранее спасибо!
