Bootstrap сетки, отзывчивые

Question

У меня есть 3 колонки с кодом здесь, например. Прямо сейчас, когда окно браузера становится меньше, оно складывается из 1-го столбца сверху, 2-го в середине и затем 3-го в последнюю очередь, как и ожидалось. Я хочу, чтобы столбцы вели себя так, когда столбцы становятся меньше.

First - This column gets hidden and I have already established that in the CSS
Third - This is the first column on top. 
Second- This column is on bottom.

<div class="row">
  <div class="col-sm-3">First</div>
  <div class="col-sm-6">Second</div>
  <div class="col-sm-3">Third</div>
</div>

Answer 1

Используйте .order- классы для управления визуальным порядком вашего контента.

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      First, but unordered
    </div>
    <div class="col-sm-6 order-12">
      Second, but last
    </div>
    <div class="col-sm-3 order-1">
      Third, but first
    </div>
  </div>
</div>