aspdotnetkhan Ответов: 2

bootstrap : изменение порядка столбцов в небольших устройствах

Привет,


Здесь я показываю 5 столбцов в bootstrap на большом экране.

коробка 1-коробка 2-коробка 3-коробка 4-Коробка 5


Но в соответствии с требованием я хочу изменить порядок столбцов в мобильном устройстве, как это.

коробка 1-коробка 4 -

коробка 2-коробка 3 -

коробка 5 -

Как этого достичь? 

@media (min-width: 980px) 
{
	
.col_5 { width:20%; position:relative; float:left }
	  
}


<div>

<div class="col_5 col-xs-6"> box 1 </div>

<div class="col_5 col-xs-6">box 2</div>

<div class="col_5 col-xs-6">box 3 </div>

<div class="col_5 col-xs-6">box 4</div>

<div class="col_5">box 5</div>


</div>

Richard Deeming

Я не знаю ничего в Bootstrap, чтобы сделать это.

Какие браузеры вам нужно поддерживать? Если вы можете отказаться от IE10 и более ранних версий, На основе адаптируемых блоков[^] должны поддержать это.

aspdotnetkhan

https://www.google.ae/?gfe_rd=cr&ei=ttvaVY_RJKys8weH56ToCQ&gws_rd=ssl#start=10&q=Bootstrap+Column+reordering

2 Ответов

Рейтинг:
9

CanniDanny

Я бы попробовал применить поплавки к дивам в медиа-запросе, это потребует, чтобы у каждого дива был идентификатор. Применяя float к классу, как вы предлагаете в своем вопросе, вы переместите весь свой div влево.

@media (min-width: 980px) 
{

.col_5 {
         width: 20%;
         position: relative;
}
	
#box1 {
         float: left;
}

#box2 {
         float: right;
}

#box3 {
         float: left;
}

#box4 {
         float: right;
}

#box5 {
         float: left;
}
	  
}


Затем примените эти идентификаторы к полям следующим образом:

<div>
 
<div id="box1" class="col_5 col-xs-6">box 1 </div>
 
<div id="box2" class="col_5 col-xs-6">box 2</div>
 
<div id="box3" class="col_5 col-xs-6">box 3 </div>
 
<div id="box4" class="col_5 col-xs-6">box 4</div>
 
<div id="box5" class="col_5">box 5</div>
 

</div>


Я надеюсь, что это поможет!

Рейтинг:
15

Krunal Rohit

На занятиях применяются наряду с классами начальной загрузки сетки .коль-хз-#, .коль-см-#, .коль-МД-#, и .коль-ЛГ-#.

Толкать и тянуть классов в случае начальной загрузки сетки .коль-хз-пуш-# или .коль-хз-потянет-#. Это также работает с sm, md и lg.

То push класс будет перемещать столбцы вправо, в то время как pull класс переместит столбцы влево.

Пожалуйста, обратитесь к этому для получения дополнительной идеи:
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap[^]
Демо-Версия Codepen[^]

-КРОНА