Question

我希望在桌面视图中显示时以相同的方式显示面板，但想要在移动设备中查看时更改顺序。在移动视图中，第一个面板First Name和最后一个面板Last Name应该一个接一个地看到。我用Google搜索但无法找到解决方案。请帮帮我。

<div class="container active col-md-4 col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">First Name</div>                 
                </div>
            </div>

          <div class="container active col-md-4 col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">Address</div>
            </div>
          </div>

        <div class="container active col-md-4 col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">Company</div>
             </div>
        </div>

        <div class="container active col-md-4 col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">Last Name</div>              
                </div>
        </div>

Answer 1

是的，这是通过Bootstrap的order类完成的。

Bootstrap 4.0 +

您可以使用order-1到order-12，并且将从1-12开始订购。要在此处设置响应断点，您可以使用它们，例如order-sm-6和order-sm-7。

在你的代码中，要将lastName移动到第二个插槽，你需要对它们重新排序，并为断点设置自定义顺序，如下所示：

    <div class="container active col-md-4 col-sm-6 order-md-1">
      <div class="panel panel-default">
        <div class="panel-heading">First Name</div>                 
      </div>
    </div>
    <div class="container active col-md-4 col-sm-6 order-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Last Name</div>              
      </div>
    </div>
    <div class="container active col-md-4 col-sm-6 order-md-2">
      <div class="panel panel-default">
        <div class="panel-heading">Address</div>
      </div>
    </div>
    <div class="container active col-md-4 col-sm-6 order-md-3">
      <div class="panel panel-default">
        <div class="panel-heading">Company</div>
      </div>
    </div>

按照md及以上的当前顺序排列。

https://getbootstrap.com/docs/4.0/layout/grid/#order-classes了解更多信息。

Bootstrap 3

使用推/拉进行排序。

所以col-md-push-3会将列推到3/12以上，如果它可以捕捉。下面的示例是以md以下的代码顺序呈现的列，但是在md及以上版本中反转：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

在这种情况下（将姓氏推回到md及以上的结尾）：

<div class="container active col-md-4 col-sm-6">
  <div class="panel panel-default">
    <div class="panel-heading">First Name</div>                 
  </div>
</div>
<div class="container active col-md-4 col-sm-6 col-md-push-8">
  <div class="panel panel-default">
    <div class="panel-heading">Last Name</div>              
  </div>
</div>
<div class="container active col-md-4 col-sm-6">
  <div class="panel panel-default">
    <div class="panel-heading">Address</div>
  </div>
</div>
<div class="container active col-md-4 col-sm-6">
  <div class="panel panel-default">
    <div class="panel-heading">Company</div>
  </div>
</div>

在移动设备上看到Bootstrap面板可以按不同顺序重新排序吗？

1 个答案:

Bootstrap 4.0 +