bootstrap:小型设备中的列重新排序 [英] bootstrap : reorder column in small devices

问题描述

在这里，我在大屏幕上的引导程序中显示5列.

盒子1-盒子2-盒子3-盒子4-盒子5


但是根据要求，我想像这样对移动设备中的列进行重新排序.

框1-框4-

方块2-方块3-

框5-

如何实现?

Hi,


Here i am showing 5 columns in bootstrap in large screen.

box 1 - box 2 - box 3 - box 4 - box 5


But as per requirement i want to reorder the columns in mobile device like this.

box 1 - box 4 -

box 2 - box 3 -

box 5 -

How to achieve it?

@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>

推荐答案

这些类与.col-xs-#、. col-sm-#、. col-md-#的Bootstrap网格类一起使用和.col-lg-#.

应用于Bootstrap网格的push和pull类是.col-xs-push-#或.col-xs-pull-#.这也适用于sm，md和lg.

push类会将列向右移动，而pull 类会将列向左移动.

请参考此以获得更多想法:
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap [ ^ ]
Codepen演示 [

The classes are used along with the Bootstrap grid classes of .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-#.

The push and pull classes applied to the Bootstrap grid are .col-xs-push-# or .col-xs-pull-#. That also works with sm, md, and lg.

The push class will move columns to the right while the pull class will move columns to the left.

Please refer this for more idea:
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap[^]
Codepen Demo[^]

-KR

我会尝试将float应用于媒体查询中的div，这会要求每个div都有一个id.通过按问题中的建议将浮点数应用于班级，您会将所有div浮点数向左.

I would try applying floats to the divs within the media query, this ill require each div to have an id. By applying the float to the class as you suggest in your question you will float all of your div to the left.

@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;
}
	  
}

然后将这些ID应用于框，如下所示:

Then apply these id''s to the boxes as follows:

<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>

希望对您有所帮助！

I hope that this helps!

这篇关于bootstrap:小型设备中的列重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！