Question

场景是：

[A][B][C]

当我搬到XS时，我想订购：

[A][C]
[B]

这可能具有以下结构吗？我需要重新安排吗？

<div class="col-sm-3">A</div>
<div class="col-sm-6">B</div>
<div class="col-sm-3">C</div>

Answer 1

默认情况下，在Bootstrap中，如果给定行中的列数大于12，则标记上的任何列都将移动到新行。

此外，您可以通过将屏幕尺寸类链接到<div>来为每个屏幕尺寸设置单独的列大小。

话虽如此，你可以这样做：

<div class="row">
  <div class="col-xs-6 col-sm-3">A</div>
  <div class="col-xs-6 col-sm-6">B</div>
  <div class="col-xs-12 col-sm-3">C</div>
</div>

在小屏幕上，这将显示为：

[___][______][___]

在超小屏幕上：

[______][______]
[______________]

您可以随意调整色谱柱尺寸以满足您的需求，只需确保具有＆gt; <div class="row">中的12列强制额外列向下推。

希望有所帮助！

修改

Bootstrap支持基于屏幕大小的列重新排序，使用col-X-pull-Y类（大小，列）。因此，一个简单的解决方案是：

<div class="row"> <div class="col-xs-6 col-sm-3">A</div> <div class="col-xs-6 col-sm-3 col-sm-push-6">C</div> <div class="col-xs-12 col-sm-6 col-sm-pull-3">B</div> </div>

请注意，订单已更改为适应最小尺寸的状态，而我只需push和pull一个更大尺寸的列，以便将它们放置在需要的位置。

Answer 2

Bootply ：http://www.bootply.com/ziPH2ghaTB

HTML ：

<div class="container">
  <div class="col-xs-6 col-sm-4 a">a</div>
  <div class="col-xs-6 col-sm-4 col-sm-push-4 c">c</div>
  <div class="col-xs-12 col-sm-4 col-sm-pull-4 b">b</div>
</div>

Bootstrap Column Ordering：在移动设备上，将三列排列为两列

2 个答案: