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