Question

我们说我有这个HTML

<div class="row">
    <div class="col-md-4 col-xs-12" id="col1"></div>
    <div class="col-md-8 col-xs-12" id="col2"></div>
</div>

在移动视图中，如何在col1之后将col2移至底部。我知道如果我在DOM col1之后移动col2很容易，但我希望col1位于左侧，col2位于右侧。

Answer 1

Bootstrap 3首先是Mobile，使用您希望在移动视图中显示的列的代码顺序，并使用col-xx-push-y和col-xx-pull-y类对桌面视图中的列重新排序。

<div class="row">
  <div class="col-md-4 col-md-push-8 col-xs-12">Right column, but first in mobile view</div>
  <div class="col-md-8 col-md-pull-4 col-xs-12">Left column, displayed in left although it is declared in code after right column</div>
</div>

在此处查看演示 - http://www.bootply.com/rZ5Uv8q84K

Answer 2

诀窍是使用使用bootstrap列排序技术编译的移动优先策略。

使用以下类和结构：

<div class="row">
    <div class="col-md-8 col-md-push-4 col-xs-12" id="col2">Col 2</div>
    <div class="col-md-4 col-md-pull-8 col-xs-12" id="col1">Col 1</div>
</div>

首先，您可以按照您希望它们在移动设备上显示的方式排序列（第2列然后是第1列，等等）。一旦视图端口达到您希望它们正确堆叠的MD大小，为此，您可以使用col-md-push和col-md-pull重新排序列。 Col 1被拉8（col 2的大小），col 2被推4（col 1的大小）。

在此处查看演示：http://www.bootply.com/kHPSKAPgAA

另外您实际上并不需要在列中包含col-xs-12。在视口移动到MD大小后，它将自动重置为100％（相当于col-xs-12）。

bootstrap 3.0列在移动视图中从底部推送到底部

2 个答案: