С выходом bootstrap 4 появилось свойство order. Это свойство меняет порядок блоков при перестроении. Так же, как и разбивка размеров col это свойство имеет прификсы sm, lg и тд.
Для того чтобы условный, второй блок при перестроении занял первое место, нужно указать его последовательность. При этом нужно это сделать для каждого блока в строке (row)
Код примера
<div class="container">
<div class="row">
<div class=" col-sm-12 col-xl-4 order-lg-1 order-md-2 order-sm-2 order-2 ">контент </div>
<div class=" col-sm-12 col-xl-8 order-lg-2 order-md-1 order-sm-1 order-1 "> контент </div>
</div>
</div>
В примере выше, второй блок станет первым при размере экрана 768px. Но не достаточно указать только order-md, нужно использовать порядок для всех последующих значений, включая минимальный order без прификса. Если это не будет сделано, блок вновь встанет на второе место при достижении меньшего размера.
