Изменение порядка в div с Bootstrap 3

Question

Есть ли способ получить следующий макет div с использованием уже определенных классов Bootstrap 3?Я хочу по возможности избегать использования медиазапроса.

Рабочий стол

[1] [2]
[3]

Мобильный

[1]
[3]
[2]

Я пытался сначала кодировать div с мобильным, а также толкать и тянутьизменить порядок на рабочем столе, но с этим конкретным макетом, использующим эти классы, просто выталкивает и вытаскивает div из области просмотра, а не оборачивает их в сетку из 12 столбцов и перемещает их вверх или вниз по строке.

Answer 1

Насколько я знаю, это невозможно с Bootstrap 3. Если бы вы могли обновить его до Bootstrap 4, вы могли бы изменить их порядок с помощью гибкого макета.

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-9 order-0 order-sm-0">
      1
    </div>
    <div class="col-12 col-sm-3 order-2 order-sm-1">
      2
    </div>
    <div class="col-12 order-1 order-sm-2">
      3
    </div>
  </div>
</div>

Остерегайтесь, что Bootstrap сначала мобильныйи классы должны использоваться от самого маленького до самого широкого.

Answer 2

<div class="container" style="background-color:grey">
  <div class="row">
    <div class="col col-sm-12 col-md-8" style="background-color:blue">
      1 of 3
    </div>
    <div class="col col-sm-12 col-md-4" style="background-color:red">
      2 of 3
    </div>
    <div class="col col-12" style="background-color:green">
      3 of 3
    </div>
  </div>
</div>

Использование функции сетки столбцов Bootstrap должно решить ваш запрос. Ссылки - Bootstrap Docs

Редактировать: Моя ошибка исправлена, и вот пример загрузки пример