Bootstrap order. Как правильно прописать свойство?

С выходом 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 без прификса. Если это не будет сделано, блок вновь встанет на второе место при достижении меньшего размера.

Творческая мастерская Ваш WEB стиль. Разработка и дизайн сайтов
Закрыть форму
Спасибо. Ваше сообщение отправлено

В ближайшее время, мы свяжемся с вами для уточнения всех деталей. Письмо придет на указанную электронную почту