Html 如何在bootstrap中将左侧边栏置于移动视图内容下方？

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

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

侧栏
内容

我喜欢笔记本电脑和更大屏幕的视图，但屏幕上有推拉解决方案 如果可以在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>

内容
边栏

推拉式解决方案 如果可以在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>

内容
边栏

您可以使用

方向：rtl在您的容器上，并且
方向：ltr

HTML:

您可以使用
方向：rtl在您的容器上，并且
方向：ltr

HTML:

更新引导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>


正确内容
左侧边栏
更新引导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>


正确内容
左侧边栏
我使用
col md push-*
解决了这个问题，我还更改了列的顺序，然后应用了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-*
中的
sm，那么就是推内容div和拉边栏-意味着
屏幕大小≥992px
边栏div首先出现，然后是内容div

对于
sm
屏幕大小（我使用
col md push-*
解决了这个问题，我还更改了列的顺序，然后应用了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-*
中的
sm，那么就是推内容div和拉边栏-意味着
屏幕大小≥992px
边栏div首先出现，然后是内容div

对于在
sm
屏幕大小（我在这里只想要sm-*列。@yogihosting为什么不能添加
列xs-*
？这是与bootstrap一起在不接触css的情况下操作布局的最简单/最好的方法。我希望div松弛，但以相反的方式。您的解决方案根本不允许松弛。@yogihosting我用bootstrap解决方案更新了我的帖子。谢谢你给了我push的知识，我现在可以解决它了。我这里只需要sm-*列。@yogihosting为什么不能添加
col xs-*
？这是与Boostrap一起操作布局而不接触css的最简单/最好的方法。我希望div松弛，但方式相反。你的解决方案根本不允许松弛。@y我用bootstrap解决方案更新了我的帖子。谢谢你给了我推送的知识，我现在能够解决它。你找到一个有效的解决方案了吗？你找到了一个有效的解决方案了吗？谢谢你给了我推送的知识，我能够解决我的问题。虽然我在使用bootstrap 3。谢谢你给了我推送和推送的知识我能够解决我的问题。尽管我使用的是Bootstrap3。