Как в бутстрапе 3 изменить порядок блоков с переносом на следующую строку?

В Bootstrap 3 есть возможность управлять порядком блоков на разных разрешениях экрана с помощью класса .col--.
Для переноса блока на следующую строку с изменением порядка необходимо использовать следующие классы:

1. .col-md-push- и .col-md-pull-:

• .col-md-push-* позволяет сдвинуть блок вправо;
• .col-md-pull-* позволяет сдвинуть блок влево.

2. .col-xs-*:

• Для блоков с разрешением экрана меньше 768 пикселей (extra small screens).

3. .col-sm-*:

• Для блоков с разрешением экрана от 768 до 992 пикселей (small screens).

4. .col-md-*:

• Для блоков с разрешением экрана от 992 до 1200 пикселей (medium screens).

5. .col-lg-*:

• Для блоков с разрешением экрана больше 1200 пикселей (large screens).

Добавим ряд блоков (A, B, C, D) и установим им классы согласно необходимому порядку:

<div class="container">
      <div class="row">
            <div class="col-md-4 col-md-push-8 col-sm-6 col-sm-push-6 col-xs-12">D</div>
              <div class="col-md-4 col-md-pull-4 col-sm-6 col-sm-push-6 col-xs-12">C</div>
              <div class="col-md-4 col-sm-6 col-xs-12">A</div>
              <div class="col-md-4 col-md-pull-4 col-sm-6 col-xs-12">B</div>
      </div>
</div>

В данном примере блоки расположены по следующему порядку:

1. При разрешении экрана от 992px и больше: A, B, D, C;
2. При разрешении экрана от 768px до 991px: A, C, B, D;
3. При разрешении экрана меньше 768px: D, C, A, B.

Используя эти классы, вы можете гибко управлять порядком блоков на разных разрешениях экранов, обеспечивая адаптивность вашего макета в Bootstrap 3.