#twitter-bootstrap #push #pull
#twitter-bootstrap #толкать #тянуть
Вопрос:
У меня небольшая проблема. У меня есть три столбца на xs и sm, подобные этому :
[A]
[B]
[C]
На md и lg я хочу это :
[B]
[A][C]
Я пробовал это, но это не работает:
<div class="col-xs-12 col-md-8 col-md-push-12">
Col A
</div>
<div class="col-xs-12 col-md-12 col-md-pull-12">
Col B
</div>
<div class="col-xs-12 col-md-4">
Col C
</div>
Столбцы A и B находятся снаружи : (
Спасибо
Комментарии:
1. Я не думаю, что можно изменить порядок элементов с помощью bootstrap, но вы можете сделать это с помощью CSS grid
Ответ №1:
Вы можете легко изменить порядок столбцов в bootstrap с помощью классов order.
Используйте классы .order для управления визуальным порядком вашего содержимого. Эти классы являются адаптивными, поэтому вы можете установить порядок по точке останова (например, .order-1.order-md-2).
Пример того, как изменить порядок столбцов B и C на маленьких экранах:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-xs-12 col-md-8 ">
Col A
</div>
<div class="col-xs-12 col-md-12 order-sm-3">
Col B
</div>
<div class="col-xs-12 col-md-4 order-sm-2">
Col C
</div>
</div> Комментарии:
1. Спасибо за ваш ответ, но ваш код работает только на Bootstrap 4, а я использую Bootstrap 3: (
2. Невозможно изменить порядок этого с помощью basic bootstrap3, вы можете изменить порядок только с помощью flexbox или grid. Пожалуйста, прочтите это примечание из используемого вами bootstrap-тега:
For questions related to a version of Bootstrap also use the specific version's tag from "twitter-bootstrap-2", "twitter-bootstrap-3" and "bootstrap-4" tags.