Bootstrap：使用右拉，左拉/ 3列更改div顺序
我一整天都在做这个工作，但是没有提出一个解决scheme。 我有一个容器中的一行3列。
1：正确的内容 – 拉右
2：导航 – 左拉
3：主要内容
大屏幕上显示的内容：
------------------------------------------------ | Menu | Content | Right Content | ------------------------------------------------ 它应该在小屏幕上看起来像什么：
---------------------------- | Menu | Right Content | | |------------------ | | Content | ----------------------------
现在看起来像什么：
------------------ | Right Content | ------------------ | Menu | Content | ------------------
我认为这只是一个简单的浮动问题。 但是我尝试了几乎所有的可能性。
Bootstrap 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>
工作示例： http ： //bootply.com/93614
说明
首先，我们设置两列，无论屏幕分辨率（ col-xs-* ）如何，都会保留在原位。
接下来，我们将较大的右侧列分成两列，这两列将在平板电脑大小的设备上以及较低（ col-md-* ）上col-md-* 。
最后，我们使用匹配的类（ col-md-[push|pull]-* ）来移动显示顺序。 你把第一列按第二列的数量，然后把第二列的数目拉到第一列。
尝试这个…
<div class="row"> <div class="col-xs-3"> Menu </div> <div class="col-xs-9"> <div class="row"> <div class="col-sm-4 col-sm-push-8"> Right content </div> <div class="col-sm-8 col-sm-pull-4"> Content </div> </div> </div> </div>
