我一直在这一整天的工作，但不提出一个解决方案。我在容器中的一行中有3列。
1：正确的内容 – 拉右
2：导航 – 拉左
3：主要内容
它在大屏幕上看起来：
------------------------------------------------ | Menu | Content | Right Content | ------------------------------------------------
在较小的屏幕上应该是什么样子：
---------------------------- | Menu | Right Content | | |------------------ | | Content | ----------------------------
现在的样子：
------------------ | Right Content | ------------------ | Menu | Content | ------------------
我认为这只是一个简单的浮动问题。但我试过几乎所有的可能性。
解决方法
引导3
使用Bootstrap 3的网格系统：
<div class="container">
<div class="row">
<div class="col-xs-4">Menu</div>
<div class="col-xs-8">
<div class="row">
<div class="col-md-4 col-md-push-8">Right Content</div>
<div class="col-md-8 col-md-pull-4">Content</div>
</div>
</div>
</div>
</div>
说明
首先，我们设置两个列，将保持在原地，无论屏幕分辨率(col-xs- *)。
接下来，我们将较大的右侧列分成两个列，这两个列将在平板电脑尺寸的设备上相互叠加，并降低(col-md- *)。
最后，我们使用匹配类(col-md- [push | pull] – *)来移动显示顺序。你推第一列超过第二个的数量，并拉第二个数量的第一个。
