我整天都在努力，但没有提出解决方案。我在一个容器中的一行中有3列。
1：正确的内容–向右拉
2：导航–向左拉
3：主要内容
在大屏幕上看起来是什么：
------------------------------------------------ | Menu | Content | Right Content | ------------------------------------------------
在较小的屏幕上应该是什么样子：
---------------------------- | Menu | Right Content | | |------------------ | | Content | ----------------------------
现在看起来像什么：
------------------ | Right Content | ------------------ | Menu | Content | ------------------
我认为这只是一个简单的浮动问题。但是我几乎尝试了所有可能性。
使用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-xs-*
接下来，我们将较大的右侧列分为两列，这些列将在平板电脑大小的设备上彼此重叠，而在较低的（col-md-*）上相互重叠。
col-md-*
最后，我们使用匹配的类（col-md-[push|pull]-*）更改显示顺序。您将第一列的数量推到第二列，然后将第二列的数量推到第一列。
col-md-[push|pull]-*
