Возможна загрузка системы GRID?

Question

Добрый день! Я пытаюсь выяснить, возможен ли сценарий ниже.

Когда он находится на рабочем столе/ноутбук макет должен быть, как этот

<div class="col-md-3"> 
sidebar 
</div> 

<div class="col-md-9"> 
article 
</div> 

Когда он находится на маленьком экране два DIV будет переключаться и должно быть, как это один

<div class="col-md-9"> 
sidebar 
</div> 

<div class="col-md-3"> 
article 
</div> 

Ваш ответ оценивается!

Answer 1

Вы можете! Добавив несколько классов сетки к вашему <div>, вы можете определить размер столбцов для каждой точки останова. В вашем случае это может быть col-xs-9 col-md-3 на боковой панели и col-xs-3 col-md-9. Это сделало бы боковую панель занятой 9 из 12 столбцов для размеров точек останова xs и sm и 3 из 12 столбцов для размеров точек останова md и lg.

Откройте следующий пример в полноэкранном режиме, чтобы играть с точками останова.

.box { 
 
    border: 1px solid #c66; 
 
    background-color: #f99; 
 
}

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

 
<div class="col-xs-9 col-md-3 box"> 
 
    sidebar 
 
</div> 
 
<div class="col-xs-3 col-md-9 box"> 
 
    article 
 
</div>

---

Ваш комментарий Я вижу, что вы хотите, чтобы статья быть на верхней части боковой панели для маленьких экранов. Это немного сложнее. Вам необходимо сделать три вещи:

1. Разработка мобильных устройств, начиная с макета для небольших экранов. Вам необходимо изменить порядок боковой панели и статью <div>.

2. Убедитесь, что на маленьких экранах боковая панель и статья занимают 12 из 12 столбцов, используя col-xs-12. Это заставит боковую панель подталкивать под статью.

3. Обратите внимание, что на экранах рабочего стола боковая панель и статья появляются рядом друг с другом, но с боковой панелью справа, а не слева. Вы можете изменить это, потянув боковую панель влево, добавив col-md-pull-9 (вам нужно вытащить 9 столбцов влево, количество столбцов, которые занимает статья) и нажав статью справа, добавив col-md-push-3 (вам нужно нажмите 3 столбца справа, количество столбцов, которые занимает боковая панель).

См обновленный пример:

.box { 
 
    border: 1px solid #c66; 
 
    background-color: #f99; 
 
}

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

 
<div class="col-xs-12 col-md-9 col-md-push-3 box"> 
 
    article 
 
</div> 
 
<div class="col-xs-12 col-md-3 col-md-pull-9 box"> 
 
    sidebar 
 
</div>

Answer 2

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

<div class="col-sm-9 col-md-3"> 
sidebar 
</div> 

<div class="col-sm-3 col-md-9"> 
article 
</div> 

Это будет отображать боковую панель в 9 блоков в Очень (XS) и малых (см) и в 3 блоках для MeDium (md) и LarGe (lg) и наоборот ,

Answer 3

Существует несколько префиксов для начальной загрузки, чтобы указать ширину класс: -xs-/-sm-/-md-/-lg- (от самых маленьких до самой большой ширины).

Итак, от -md- и большего экрана у вас есть col-md-3 и col-md-9. Чтобы получить их в обратном порядке на pre--md- класс, вы можете указать -xs- или -sm- префикс.

Так реверс классы, просто написать:

<div class="col-md-9 col-xs-3"></div> 
<div class="col-md-3 col-xs-9"></div>