如何在引导程序中将左侧边栏置于移动视图的内容下方？答案

【问题标题】：How to bring left sidebar below the content for mobile view in bootstrap?如何在引导程序中将左侧边栏置于移动视图的内容下方？
【发布时间】：2017-09-17 14:15:38
【问题描述】：

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

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

我喜欢笔记本电脑和更大屏幕的视图，但屏幕宽度

我知道这是一个引导功能，但我希望它以另一种方式松弛 - 我希望内容位于屏幕

您可以在jQuery 页面上查看此内容。在较小的浏览器视图上打开页面将显示我的意思。

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

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

【问题讨论】：

您找到可行的解决方案了吗？

标签： html css twitter-bootstrap

【解决方案1】：

推拉解决方案

如果您可以重新排序 html 中的 div，则可以使用引导程序中的 push 和 pull。

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

【讨论】：

我只想要 sm-* 列。
@yogihosting 为什么不能加col-xs-*？这是与 Boostrap 一起在不接触 css 的情况下操作布局的最简单/最佳方式。
我希望 div 以相反的方式松弛。您的解决方案根本不允许 then 懈怠。
@yogihosting 我用引导解决方案更新了我的帖子。
谢谢你给了我推送的知识，我现在可以解决了。

【解决方案2】：

更新 Bootstrap V4 Alpha

使用 push-md-* 和 pull-md-* 修饰符类更改网格列的顺序。

示例

<div class="row">
    <div class="col-md-9 push-md-3">Right Content</div>
    <div class="col-md-3 pull-md-9">Left Sidebar</div>
</div>

【讨论】：

谢谢你给了我推送的知识，我能够解决我的问题。虽然我使用的是引导程序 3。

【解决方案3】：

您可以在容器上使用direction: rtl;，在列上使用direction: ltr;，并使用适当的媒体查询。

HTML：

<div class="row-rtl">
  <div class="col-ltr">Main</div>
  <div class="col-ltr">Sidebar</div>
</div>

CSS：

.row-rtl {
  direction: rtl;
}
.col-ltr {
  direction: ltr;
}

【讨论】：

【解决方案4】：

我使用col-md-push-* 解决了它，我还先更改了列的顺序，然后再应用推送。这是最终代码。

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

push 和 pull 的作用是，当屏幕尺寸大于 sm 时，md-* 和 lg-* 中的含义是推动内容 div 并拉动侧边栏 - 含义screen size ≥992px 侧边栏 div 先出现，然后是内容 div。

对于sm 屏幕尺寸 (

【讨论】：