изменить порядок столбцов системы сетки бутстрапа

Question

Я хочу изменить поведение по умолчанию в системе бутстрапов. Я использую следующие строки кодов для отображения двух столбцов в моей странице:

<div class="col-md-8" id="one"> 
... 
</div> 

<div class="col-md-4" id="two"> 
... 
</div> 

Когда размер экрана слишком мал, чтобы отобразить обе колонки рядом друг с другом позиции начальной загрузки div one выше div two. Я хочу инвертировать это поведение так, чтобы оно позиционировалось div two выше div one. Однако, если для обоих столбцов достаточно места, поведение по умолчанию должно оставаться неизменным.

Answer 1

Изменить порядок <div> так, чтобы two пришел первым, чтобы сделать заказ на маленьком экране правильно. Затем используйте col-md-push-8 и col-md-pull-4, чтобы нажимать и потянуть колонки two и one в правильном порядке на больших экранах.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-md-4 col-md-push-8">two</div> 
 
<div class="col-md-8 col-md-pull-4">one</div>

См http://getbootstrap.com/css/#grid-column-ordering для некоторой справочной информации о колонке приказывая