Question

首先，我正在使用Bootstrap。我需要在手机上订购2个cols。这就是我们在代码中的排列方式：

<!--First col-->
<div class="col-sm-6">
<!--Content--> 
</div>

<!--Second col-->
<div class="col-sm-6">
<!--Content--> 
</div>

正如在移动设备上所预期的那样，第一个col将被置于第二个col（块）之上。在更大的屏幕上，First col将位于左侧，第二个col位于右侧（内联块）。我想仅为较小的屏幕更改两个cols的位置，以便第二个col将位于First col之前，如下所示：

<!--Second col-->
<div class="col-sm-6">
<!--Content--> 
</div>

<!--First col-->
<div class="col-sm-6">
<!--Content--> 
</div>

在这种情况下，第二个col将位于较小屏幕上的第一个col的顶部。我希望这只适用于移动设备。那我该怎么做呢？解决方案或建议会非常有帮助。提前谢谢。

Answer 1

Bootstrap有自己的类来处理列的顺序，这些列完全符合你的需要。

http://getbootstrap.com/css/

搜索＆＃34;列排序＆＃34;。

例如：

＆＃13;

<!--Second col-->
<div class="col-sm-6 col-sm-pull-6">
    <!--Content--> 
</div>

<!--First col-->
<div class="col-sm-6 col-sm-push-6">
    <!--Content--> 
</div>

＆＃13;

在上面的示例中，我们首先使用＆＃34;移动设备＆＃34;布局。所以我们先把第二列放在第一列，然后使用bootstrap push和pull类，我们可以在更高的断点上重新排列顺序。

Nb：我从行业专业人士那里学到的一个很好的建议就是开始编写你的布局＆＃39;从移动设备开始，然后继续努力。在大多数情况下至少。

Answer 2

您可以使用display:flex css属性。 Demo

<强> HTML

<div class="flex-wrap">
<!--First col-->
<div class="col-sm-6 flex-item1">
<!--Content--> 
</div>

<!--Second col-->
<div class="col-sm-6 flex-item2">
<!--Content--> 
</div>
</div>

<强> CSS

.flex-wrap {
    display: flex;
}
.flex-item1 //First col{
    order: 1; 
}
.flex-item2 //Second col{
    order: 2; 
}
@media screen and (max-width: 676px) {
    .flex-wrap {
        flex-wrap: wrap;
    }
    .flex-item1 //First col - changed the position to 2{
        order: 2;
        width: 100%;
    }
    .flex-item2 //Second col position changed to 2{
        order: 1;
        width: 100%;
    }
}

您可以使用@media Screen (max-width:676px)

提及确切的手机

Answer 3

在移动设备上使用媒体查询尝试此

div.md-right{
float:right
}
div.md-left{
float:left;
}

@media (max-width: 767px) { 
  div.md-right,
  div.md-left{
    float:none;
    width:100%;
    }
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <!--First col-->
        <div class="col-sm-6 md-right">
            <!--Content--> First col
        </div>

        <!--Second col-->
        <div class="col-sm-6 md-left">
            <!--Content--> Second col
        </div>
    </div>
</div>

您可以根据需要进行设置

Bootstrap / CSS - 如何在移动设备上安排2个cols

3 个答案: