Bootstrap: столбец перемещается за другим на маленьком дисплее

Question

В дисплеях, больших, чем мобильные устройства, я хотел бы иметь такую ​​диспозицию (в следующем порядке):

столбец-большой 2 - столбец-B большой 8 - столбец-С большой 2

В мобильном я хотел бы иметь (в разных строках) смещение первого столбца после второго:

столбец-B, большой 12 - столбец-большой 6 - столбец-С большой 6

Кто-то может сказать мне, если это возможно, и если да, то как мне быть? Спасибо

 <div class="container">
     <div class="row">
         <div class="col-lg-2"></div>
         <div class="col-lg-8"></div>
         <div class="col-lg-2"></div>
     </div>
 </div>

Answer 1

Если вы делаете mobile first, вы должны сначала определить столбцы в HTML в порядке, который вы хотите:

<div class="container">
  <div class="row">
    <div class="col-12">
      B
    </div>
    <div class="col-6">
      A
    </div>
    <div class="col-6">
      C
    </div>
  </div> 
</div>

Это гарантирует, что это будет выглядеть так, как вы хотите на небольших устройствах. И тогда мы можем добавить больше стилей для больших устройств.

Затем на более крупных устройствах (вы сказали, больше, чем на мобильных устройствах), что соответствует классу col-md-* в начальной загрузке. Вы можете добавить это к столбцам. Также, так как вы хотите, чтобы столбец A появился первым, вы можете установить их порядок, используя класс начальной загрузки order-md-*. Чем меньше ордер, тем более раннюю позицию он получит.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 order-md-2">
      B
    </div>
    <div class="col-6 col-md-2 order-md-1">
      A
    </div>
    <div class="col-6 col-md-2 order-md-3">
      C
    </div>
  </div> 
</div>

Результат:

См. Скрипку: http://jsfiddle.net/aq9Laaew/61343/

Answer 2

Для мобильного использования col-*:

Узнайте здесь: https://getbootstrap.com/docs/4.0/layout/grid/

и порядок использования: https://getbootstrap.com/docs/4.0/utilities/flex/#order

См. Скрипку: https://jsfiddle.net/L50gsumj/3/

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 <div class="container">
     <div class="row">
         <div class="col-md-2 col-6   order-2 order-md-1">a</div>
         <div class="col-md-8 col-12  order-1 order-md-2">b</div>
         <div class="col-md-2 col-6   order-3 order-md-3">c</div>
     </div>
 </div>