引导 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 将列向右“推” 9，col-md-pull-3 在“md”或更大的屏幕上将列向左“拉” 3。