Блог

Главная - Вопросы по программированию - Bootstrap может изменять сортировку в левом и правом столбцах с помощью RWD?

Bootstrap может изменять сортировку в левом и правом столбцах с помощью RWD?

#twitter-bootstrap #responsive-design

#twitter-bootstrap #адаптивный дизайн

Вопрос:

Я использую Bootstrap V4 для своего проекта.

Я знаю, как создать простую страницу RWD.

Но мне нужно изменить сортировку в левом столбце и правом столбце в мобильном

Итак, мне нужно изменить верхний элемент? вот мой код.

Я нашел какие-либо способы попробовать

Могу ли я установить для этой сортировки только изменение начальной загрузки и не нужно использовать «sm-hidden»?

Содержимое A Меню A Содержимое B Меню B Меню C

 <div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">

      <div class="col-12">
        Main A
      </div>
      <div class="col-12">
        Main B
      </div>

    </div>
    <div class="col-md-4 col-sm-12">
      
      <div class="col-12">
        Menu A
      </div>
      <div class="col-12">
        Menu B
      </div>
      
      <div class="col-12">
        Menu C
      </div>
      
    </div>
  </div>
</div>

Комментарии:

1. Привет bb_inger. Чтобы убедиться, что проблема правильно понята, вы хотите иметь возможность сортировать два столбца независимо, но в мобильном представлении второй столбец будет внизу, верно? Когда вы запускаете сортировку (щелчок по заголовку столбца), вы можете отсортировать данные и повторно отобразить таблицу. Таким образом, вы можете убедиться, что элементы строк согласованы, даже если мобильное представление изменяет макет таблицы.

2. вам нужно указать класс order в bootstap. например, order-md-1, затем order-lg-2. Также cols никогда не должны следовать за cols, вам нужно добавить класс .row между — getbootstrap.com/docs/4.0/layout/grid