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

标签 html css twitter-bootstrap

在我的 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 可以为这样的事情提供解决方案吗?请帮忙。谢谢

最佳答案

推拉解决方案

如果您可以重新排列 html 中的 div,则可以使用 Bootstrap 中的 pushpull

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

关于html - 如何在 Bootstrap 中将左侧边栏置于移动 View 内容下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43528104/

相关文章:

css - Chrome 不显示更新后的页面

javascript - 在 HTML 5 的 Canvas 中制作数据图

html - Bootstrap 4 折叠的导航栏品牌不居中

css - 文本对齐 :center Not working properly on absolute positioned spans

javascript - 柔性/Javascript : overlay components

css - TreeCheckbox CSS 可见文件夹

javascript - 使用 Javascript .getElement 在类内定位 P

html - Bootstrap 4 中 .flex-fill 的反义词是什么?

html - 如何使图像响应

javascript - 如何将 javascript 数组与 html 文件连接起来?