Bootstrap/CSS - 如何在移动设备上排列 2 列答案

【问题标题】：Bootstrap/CSS - How to arrange 2 cols on mobileBootstrap/CSS - 如何在移动设备上排列 2 列
【发布时间】：2016-03-11 21:15:40
【问题描述】：

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

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

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

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

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

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

在这种情况下，在较小的屏幕上，第二列将位于第一列之上。我希望这仅适用于移动设备。那么我该如何实现呢？解决方案或建议将非常有帮助。提前致谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 有自己的类来处理列的顺序，这正是你想要的。

http://getbootstrap.com/css/

搜索“列排序”。

例如：

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

在上面的示例中，我们使用“移动优先”布局。所以我们先放第二列，然后使用引导推拉类，我们可以在更高的断点上重新排列顺序。

Nb：我从行业专业人士那里学到的一个很好的技巧是，先从移动设备开始编写“布局”代码，然后再逐步提高。至少在大多数情况下。

【讨论】：

除了发布链接之外，您还应该编写自己的答案来解释代码。如果该链接由于某种原因被关闭，您的帖子将不会有太大用处。
几乎，您需要将第二个列放在第一位，以便它在移动设备上位于第一个列之上。其他一切都是正确的。

【解决方案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)提及确切的手机

【讨论】：

【解决方案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>

你可以根据需要设置

【讨论】：