仅使用 CSS 交换 DIV 位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17455811/
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
Swap DIV position with CSS only
提问by Dragonfly
I'm trying to swap two divs' locations for responsive design (the site looks different depending on width of the browser/good for mobile).
我正在尝试div为响应式设计交换两个s 的位置（网站看起来不同，具体取决于浏览器的宽度/适合移动设备）。
Right now I have something like this:
现在我有这样的事情：
<div id="first_div"></div>
<div id="second_div"></div>
But would it be possible to swap their placements to make it look like second_divis first, using CSS only? The HTML stays the same. I've tried using floats and stuff but it doesn't seem to work the way I want it to. I don't want to use absolute positioning because the heights of the divs are always changing. Are there any solutions, or is there just no way to do this?
但是是否可以second_div仅使用 CSS来交换它们的位置以使其看起来像第一个？HTML 保持不变。我试过使用浮动和东西，但它似乎并没有像我想要的那样工作。我不想使用绝对定位，因为divs的高度总是在变化。是否有任何解决方案，或者只是没有办法做到这一点？
回答by Dragonfly
Someone linked me this: What is the best way to move an element that's on the top to the bottom in Responsive design.
有人给我链接了这个：在响应式设计中将顶部的元素移动到底部的最佳方法是什么。
The solution in that worked perfectly. Though it doesn't support old IE, that doesn't matter for me, since I'm using responsive design for mobile. And it works for most mobile browsers.
解决方案完美地工作。虽然它不支持旧的 IE，但这对我来说并不重要，因为我使用的是移动响应式设计。它适用于大多数移动浏览器。
Basically, I had this:
基本上，我有这个：
@media (max-width: 30em) {
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.container .first_div {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.container .second_div {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
This worked better than floats for me, because I needed them stacked on top of each other and I had about five different divs that I had to swap around the position of.
这对我来说比浮动更好，因为我需要将它们堆叠在一起，并且我有大约五个不同的 div，我不得不在它们的位置周围交换。
回答by Ed Fryed
This question already has a great answer but in the spirit of exploring all possibilities here is another technique to reorder dom elements whilst still allowing them to take up their space, unlike the absolute positioning method.
这个问题已经有一个很好的答案，但本着探索所有可能性的精神，这里是另一种重新排序 dom 元素同时仍然允许它们占用空间的技术，这与绝对定位方法不同。
This method works in all modern browsers and IE9+ (basically any browser that supports display:table) it has a drawback that it can only be used on a max of 3 siblings though.
这种方法适用于所有现代浏览器和 IE9+（基本上任何支持 display:table 的浏览器），但它有一个缺点，尽管它最多只能用于 3 个兄弟姐妹。
//the html
<div class='container'>
<div class='div1'>1</div>
<div class='div2'>2</div>
<div class='div3'>3</div>
</div>
//the css
.container {
display:table;
}
.div1 {
display:table-footer-group;
}
.div2 {
display:table-header-group;
}
.div3 {
display:table-row-group;
}
This will reorder the elements from 1,2,3 to 2,3,1. Basically anything with the display set to table-header-group will be positioned at the top and table-footer-group at the bottom. Naturally table-row-group puts an element in the middle.
这会将元素从 1,2,3 重新排序为 2,3,1。基本上任何显示设置为 table-header-group 的内容都将位于顶部，table-footer-group 位于底部。自然 table-row-group 将一个元素放在中间。
This method is quick with good support and requires much less css than the flexbox approach so if you are only looking to swap a few items around for a mobile layout for example then dont rule out this technique.
这种方法速度快，支持良好，并且比 flexbox 方法需要的 css 少得多，所以如果你只是想为移动布局交换一些项目，那么不要排除这种技术。
You can check out a live demo on codepen: http://codepen.io/thepixelninja/pen/eZVgLx
您可以在 codepen 上查看现场演示：http://codepen.io/thepixelninja/pen/eZVgLx
回答by Jason Awbrey
The accepted answer worked for most browsers but for some reason on iOS Chrome and Safari browsers the content that should have shown second was being hidden. I tried some other steps that forced content to stack on top of each other, and eventually I tried the following solution that gave me the intended effect (switch content display order on mobile screens), without bugs of stacked or hidden content:
接受的答案适用于大多数浏览器，但出于某种原因，在 iOS Chrome 和 Safari 浏览器上，应该显示第二的内容被隐藏了。我尝试了其他一些强制内容堆叠的步骤，最终我尝试了以下解决方案，它给了我预期的效果（在移动屏幕上切换内容显示顺序），没有堆叠或隐藏内容的错误：
.container {
display:flex;
flex-direction: column-reverse;
}
.section1,
.section2 {
height: auto;
}
回答by Dmitriy Yusupov
Using CSS only:
仅使用 CSS：
#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}
}
<div id="blockContainer">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>
回答by Boris Yakubchik
In some cases you can just use the flex-boxproperty order.
在某些情况下，您可以只使用flex-box属性order。
Very simple:
很简单：
.flex-item {
order: 2;
}
回答by ScottS
Assuming Nothing Follows Them
假设没有任何东西跟随他们
If these two divelements are basically your main layout elements, and nothing follows them in the html, then there is a pure HMTL/CSS solution that takes the normal order shown in this fiddleand is able to flip it vertically as shown in this fiddleusing one additional wrapper divlike so:
如果这两个div元素基本上是您的主要布局元素，并且在 html 中没有任何内容跟随它们，那么有一个纯 HMTL/CSS 解决方案，它采用此小提琴中显示的正常顺序，并且能够使用此小提琴中所示垂直翻转它一个额外的包装器，div如下所示：
HTML
HTML
<div class="wrapper flipit">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
</div>
CSS
CSS
.flipit {
position: relative;
}
.flipit #first_div {
position: absolute;
top: 100%;
width: 100%;
}
This would not work if elements follow these div's, as this fiddle illustrates the issue if the following elements are not wrapped(they get overlapped by #first_div), and this fiddle illustrates the issue if the following elements are also wrapped(the #first_divchanges position with boththe #second_divand the following elements). So that is why, depending on your use case, this method may or may not work.
这是行不通的，如果元素都遵循这些div的，因为这个小提琴说明如果下列元素不裹的问题（他们得到的重叠#first_div），并且这个小提琴说明了问题，如果下面的元素也被包裹（的#first_div改变与位置都在#second_div以及以下元素）。这就是为什么，根据您的用例，此方法可能有效，也可能无效。
For an overall layout scheme, where all other elements exist inside the two div's, it can work.For other scenarios, it will not.
对于整体布局方案，其中所有其他元素都存在于两个 div 中，它可以工作。对于其他场景，它不会。
回答by pfmDev
This solution worked for me:
这个解决方案对我有用：
Using a parent element like:
使用父元素，如：
.parent-div {
display:flex;
flex-direction: column-reverse;
}
In my case I didn't have to change the css of the elements that I needed to switch.
就我而言，我不必更改需要切换的元素的 css。
