отображать центральные столбцы в другой строке в bootstrap в мобильном представлении - PullRequest
Новая
       4

отображать центральные столбцы в другой строке в bootstrap в мобильном представлении

0 голосов
/ 26 марта 2020

У меня есть строка с тремя столбцами в представлении рабочего стола. Теперь я хочу отобразить средний столбец под двумя другими столбцами в новой строке, как показано ниже: enter image description here

мой код для рабочий стол: 

<div class="container">
   <div class="row">
      <div class="col-md-4">
         A
      </div>
      <div class="col-md-4">
         B
      </div>
      <div class="col-md-4">
         C
      </div>
  </div>

Как мне написать код для col-sm-?

Что мне делать?

1 Ответ

0 голосов
/ 26 марта 2020

Вы можете использовать класс order-sm-last из bootstrap

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
      <div class="col-md-4 col-sm-6">
         A
      </div>
      <div class="col-md-4 col-sm-12 order-sm-last">
         B
      </div>
      <div class="col-md-4 col-sm-6">
         C
      </div>
  </div>

Пример работы в реальном времени

...