Bootstrap div不会堆叠

Question

所以我使用bootstrap来实现网格类型布局。

然而，当应用XS类（移动设备）时，我的两个div不会堆叠。

我的第一个div设置如下：

<div class="col-xs-12 col-md-3 pull-right" id="ad-container">
Content
</div>

我的第二个是这样的：

<main id="content" class="col-xs-12 col-md-9 content-area" role="main">
Content
</main>

当我以移动设备尺寸查看时，<main>元素只是直接位于“广告容器”的顶部。

pull-right会导致此吗？

由于

Answer 1

pull-right似乎是个问题。要确保您的内容区域位于较大屏幕的左侧，但位于移动设备上的广告容器下方，请使用Column Ordering

<div class="row">
  <div class="col-xs-12 col-md-3 col-md-push-9" id="ad-container">
  Content
  </div>
  <div id="content" class="col-xs-12 col-md-9 col-md-pull-3 content-area" role="main">
  Content
  </div>
</div>

col-md-push-9＆＃34;推动＆＃34;右边的列由9和col-md-pull-3＆＃34;拉＆＃34;左边的列由3开＆＃34; md＆＃34;或更大的屏幕。