Question

我在使用Bootstrap 3排序列时遇到问题。我有4个表单字段的div，按字母顺序排序。目前，它们在xs（col-xs-12）中正确显示为四列div中的一列堆叠在一起：

1 a
2 ↓
3 ↓
4 z

在md和lg中，我将它们作为连续的四个div（col-md-3），它也很有用：

1 2 3 4
a e k s
↓ ↓ ↓ ↓
d j r z

问题出现在sm我希望彼此相邻的两列（col-sm-6）。在这种情况下，我想交换第二和第三个div。目前，我明白了：

1   2     a→j

3   4     k→z

但我想得到这个：

1   3     a   k
          ↓   ↓
2   4     j   z

我想要进行此交换的原因是保持字母顺序在一列中从上到下，然后在第二列中从上到下保持。

我尝试使用push / pull无济于事 - 看起来似乎不能将事情推到另一条线上或将它们拉出来......我还阅读this StackOverflow question其中建议的答案是嵌套的列 - 但我不知道如何在这里使用它，因为在xs视图中我希望所有的div都在彼此之上。该问题的另一个受访者建议使用最初我认为可能有效的隐藏/可见，但由于这些是表单字段，我不希望有重复的字段，用户已经回答的问题可能会在调整屏幕大小时消失，替换为现在看来他们没有回答的相同字段...

我准备了一张漂亮的照片来说明我的问题，但我是新用户，所以无法发布它 - 我希望我能够让自己清楚。此外，如果这个问题已在其他地方得到解答而我错过了，请告诉我。提前感谢您的任何见解和/或建议！

Answer 1

请阅读Chris Sevilleja撰写的这篇文章Reorder CSS Columns Using Bootstrap。

我认为这就是你要找的东西。

<div class="container text-center">
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3">1</div>
  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-3">2</div>
  <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-3">3</div>
  <div class="col-xs-12 col-sm-6 col-md-3">4</div>
</div>

如何在两行中重新排序Boostrap cols并仅用于col-sm？

1 个答案: