Bootstrap 的推/拉类可以在移动设备上重新排序相同大小的列吗？

使用推/拉重新排序 Bootstrap 列：限制和替代方法

处理相同大小的列 (.col-*-12) 时，会出现一个常见查询关于使用 Bootstrap 的推拉指令更改顺序的可行性。此查询的目的是了解是否可以在具有移动屏幕尺寸的设备上反转两个此类列的放置。

推/拉的限制

不幸的是，无法重新排序.col-*-12 使用推类和拉类的列。这是因为这些列的总和超过了由 Bootstrap 中的 @grid-columns 变量指定的 12 列的预定义网格大小。

替代方法

实现如果需要重新排序，请考虑以下替代方案：

1。修改 HTML 结构并在更大的屏幕上使用推/拉：

重新排列 HTML 中的列并应用推/拉类以在更大的屏幕上实现所需的顺序。例如：

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>

2。在移动设备上使用 CSS 转换反转列顺序：

应用以下 CSS 在屏幕尺寸为 767 像素或更小的设备上反转垂直堆叠列的顺序：

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix horizontal alignment */
  }
}</code>

请注意，此方法需要使用特定于要重新排序的所需列的 HTML 类。

以上是Bootstrap 的推/拉类可以在移动设备上重新排序相同大小的列吗？的详细内容。更多信息请关注PHP中文网其他相关文章！