Question

我有一个布局，其中有两列“column-left”和“column-right”。我可以完美地显示所有视口，但我希望当我的视口改变时“列右”将首先显示“列左”（仅适用于超小型设备，例如移动）。但目前它首先显示“列左”，然后“右列”。我正在使用bootstrap 3. plz help。

这是我的html结构：

    <div class="row">
         <div class="col-lg-3 col-md-3 col-sm-3">
              <p class="text-center">Click here to see an up-to-date calendar for the Seaside Civic and Convention Center.</p>
         </div>
         <div class="col-lg-9 col-md-9 col-sm-9">
             <p class="text-center">Not finding the room you are looking for, please visit our sister hotel</p>
         </div>
    </div>

Answer 1

试试这个：

<div class="row">
    <span class="hidden-xs">
        <div class="col-lg-3 col-md-3 col-sm-3">
            <p class="text-center">Click here to see an up-to-date calendar for the Seaside Civic and Convention Center.</p>
        </div>
     </span>
     <div class="col-lg-9 col-md-9 col-sm-9">
         <p class="text-center">Not finding the room you are looking for, please visit our sister hotel</p>
     </div>
     <span class="visible-xs">
        <div class="col-lg-3 col-md-3 col-sm-3">
            <p class="text-center">Click here to see an up-to-date calendar for the Seaside Civic and Convention Center.</p>
        </div>
     </span>
</div>

Answer 2

也许我误解了这个问题？但我认为这里接受的答案是错误的。关于col-push / col-pull类的评论也是错误的。

当您交换列时，可以使用col-push / col-pull类：

<div class="row">
        <div class="col-sm-9 col-sm-push-3">
         <p class="text-center">Not finding the room you are looking for, please visit our sister hotel</p>
        </div>
      <div class="col-sm-3 col-sm-pull-9">
          <p class="text-center">Click here to see an up-to-date calendar for the Seaside Civic and Convention Center.</p>
     </div>
</div>

请注意，在网格浮动点之下，列根本不浮动（除非您通过添加xs-col-类来使用xs网格）。因此，HTML中的第一列将首先显示。当列开始浮动时，您可以使用col-push / col-pull类来交换它们。

@ rahul-kapuriya答案中的右拉和左拉类不打算操纵网格。

或者你可以申请浮动：对;在您的第一列（也是首先在HTML中交换您的列）与媒体查询。但是，如果你可以使用col-push / col-pull类，你为什么要这样做？交换列并添加.content类，如下所示：

<div class="row">
     <div class="col-sm-9 content">
         <p class="text-center">Not finding the room you are looking for, please visit our sister hotel</p>
     </div>
    <div class="col-sm-3">
          <p class="text-center">Click here to see an up-to-date calendar for the Seaside Civic and Convention Center.</p>
     </div>
</div>

现在您可以使用以下Less代码：

@media (min-width: @grid-float-breakpoint)
{
.content {
float:right;
}
}

上面的Less代码将编译成以下CSS代码：

@media (min-width: 768px) {
  .content {
    float: right;
  }
}

如何使用bootstrap推送/拉出超小型设备的列？

2 个答案: