как изменить выравнивание div в мобильной версии

Question

У меня есть 3 div в моем html.div1, div2, div3.Теперь в мобильной версии я хочу изменить выравнивание тех div.Пожалуйста, смотрите ниже изображения для лучшего понимания.

HTML

<div class="row">
 <div class="col-md-12">
  Div1
 </div>
 <div class="col-md-9" style="float:right;">
  Div3
 </div>
 <div class="col-md-3" style="float:left;">
  Div2
 </div>
</div>

ПРИМЕЧАНИЕ. Я использую загрузчик 3

Как это сделать?

Кто-нибудь может помочь, пожалуйста?

Answer 1

Я ответил на что-то похожее на этот вопрос раньше.изменение порядка col-12 невозможно с начальной загрузкой-3 (push / pull).Для этого вы можете использовать grid вместе с медиа-запросом.

<div class="row reordered">
  <div class="col-md-12">
    Div1
  </div>
  <div class="col-md-3">
    Div2
  </div>
  <div class="col-md-9">
    Div3
  </div>
</div>

css

@media screen and (max-width: 992px) { //col-md breakpoint
  .reordered {
   display: grid;
 }

 .reordered.col-md-3 {
   order: 2;
 }

.reordered.col-md-9 {
   order: 1;
 }
}

Answer 2

используйте col-sm-12 надеюсь, это будет работать

Answer 3

Вам необходимо использовать Сетка: порядок столбцов

В соответствии с концепцией mobile-first вам нужно определить представление по умолчанию для mobile first в правильном порядке.

• секция 1
• секция 3
• секция 2

Затем присваивается col-md-push-3 для секция 3 и col-md-pull-9 для сечение 2 и определить его ширину, используя col-md- class.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div>section 1</div>
    </div>
    <div class="col-xs-12 col-md-9 col-md-push-3">
      <div>section 3</div>
    </div>
    <div class="col-xs-12 col-md-3 col-md-pull-9">
      <div>section 2</div>
    </div>
  </div>
</div>

Answer 4

попробуйте это:

 @media only screen and (max-width: 400px) {
 .row {
   display: grid !important;
   grid-template-columns: auto !important;
   }
 }