CSS Bootstrap 更改 div 顺序，在 3 列上向右拉，向左拉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19929213/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap change div order with pull-right, pull-left on 3 columns
提问by user2982964
I've been working on this the whole day but don't come up with a solution. I have 3 columns in one row in a container.
我一整天都在研究这个，但没有想出解决方案。我在一个容器中的一行中有 3 列。
1: right content – pull-right
1：正确的内容 - 向右拉
2: navigation – pull-left
2：导航——向左拉
3: main content
3：主要内容
What it looks on big screens:
它在大屏幕上的样子：
------------------------------------------------
| Menu | Content | Right Content |
------------------------------------------------
What it should look like on smaller screens:
它在较小的屏幕上应该是什么样子：
----------------------------
| Menu | Right Content |
| |------------------
| | Content |
----------------------------
What it looks like now:
现在的样子：
------------------
| Right Content |
------------------
| Menu | Content |
------------------
I think it's just a simple floating problem. But I tried out nearly all possibilities.
我认为这只是一个简单的浮动问题。但我尝试了几乎所有的可能性。
回答by Sean Ryan
Bootstrap 3
引导程序 3
Using Bootstrap 3's grid system:
使用 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>
Working example: http://bootply.com/93614
工作示例：http: //bootply.com/93614
Explanation
解释
First, we set two columns that will stay in place no matter the screen resolution (col-xs-*).
首先，我们设置了两列，无论屏幕分辨率如何 ( col-xs-*) ，它们都将保持原位。
Next, we divide the larger, right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower (col-md-*).
接下来，我们将较大的右侧列分成两列，它们将在平板电脑大小的设备上折叠在彼此的顶部和较低的 ( col-md-*)。
Finally, we shift the display order using the matching class (col-md-[push|pull]-*). You push the first column over by the amount of the second, and pull the second by the amount of the first.
最后，我们使用匹配类 ( col-md-[push|pull]-*)改变显示顺序。您将第一列推到第二列的数量上，然后将第二列拉出第一列的数量。
