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

Question

我想在桌面视图中以相同的方式显示面板，但想在移动视图中更改顺序。在移动视图中，应该看到第一个面板 First Name 和最后一个面板 Last Name一个接一个。我用谷歌搜索但找不到解决方案。请帮帮我。

<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 类完成的。

---

引导 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有更多信息。

---

引导程序 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>