Как в bootstrap4 изменить порядок столбцов в мобильной версии?

Question

[Gera11]

<div class="row">
        <div class="col-md-3">
         sidebar1
        </div>
        <div class="col-md-6 mb-4 pr-md-0 pl-md-0 ">
          {content}
        </div>
        <div class="col-md-3">
        siderbar2
        </div>
      </div>

Вопрос очень простой, но хоть убей не могу понять в чем подвох.
Фишка в том, что сетка уже есть(выше) и изменять её нельзя. Нужно чтобы в мобильной версии центральный блок с {content} был в самом верху и по очереди ниже sidebar.
Пробовал через всякие offset но не могу понять как они работают

Answer 1

[Andrew]

<div class="row">
        <div class="col-md-3 order-1 order-md-0">
         sidebar1
        </div>
        <div class="col-md-6 mb-4 pr-md-0 pl-md-0 order-0 order-md-1">
          {content}
        </div>
        <div class="col-md-3 order-2">
        siderbar2
        </div>
      </div>

Comments

[Gera11]

не работает, Они по прежнему как по дефолту

[Andrew]

Gera11, https://codepen.io/kickerock/pen/gOOJjWw