html - 如何在 Bootstrap 中将左侧边栏置于移动 View 内容下方？

Question

在我的 Bootstrap 网页中，我有一个左侧边栏，除此之外我还有页面内容。 HTML 代码是:

<div class="col-sm-3">Sidebar</div>
<div class="col-sm-9">Content</div>

我喜欢笔记本电脑和更大屏幕的 View ，但屏幕 <768 像素宽(平板电脑和智能手机)。 div 松弛，侧边栏位于内容 div 之上。

我知道这是一个 Bootstrap 功能，但我希望它以另一种方式松弛 - 我希望内容位于 <768 像素宽的屏幕上的侧边栏顶部。

你可以在jQuery上查看这个东西页。在较小的浏览器 View 中打开页面将显示我的意思。

这可以在 Bootstrap 中完成吗？我绝对希望笔记本电脑和更大屏幕的设计保持不变。

而且我不想为此应用任何自定义媒体查询。 bootstrap 可以为这样的事情提供解决方案吗？请帮忙。谢谢

Answer 1

推拉解决方案

如果您可以重新排列 html 中的 div，则可以使用 Bootstrap 中的 push 和 pull。

<div class="col-sm-9 col-sm-push-3">Content</div>
<div class="col-sm-3 col-sm-pull-9">Sidebar</div>