仅使用CSS交换DIV位置

Question

我正在尝试交换两个divs位置以进行响应式设计(网站看起来不同,具体取决于浏览器的宽度/移动设备的好处).

现在我有这样的事情:

<div id="first_div"></div>
<div id="second_div"></div>

但是,是否可以交换他们的展示位置,使其看起来像是second_div第一个,仅使用CSS？HTML保持不变.我尝试过使用花车和东西,但它似乎没有按照我想要的方式工作.我不想使用绝对定位,因为divs 的高度总是在变化.有没有解决方案,或者没有办法做到这一点？

Answer 1

有人把我联系起来:在响应式设计中移动顶部到底部的元素的最佳方法是什么.

解决方案完美无缺.虽然它不支持旧的IE,但这对我来说并不重要,因为我正在使用移动设备的响应式设计.它适用于大多数移动浏览器.

基本上,我有这个:

@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;
  }
}

这对我来说比漂浮更好,因为我需要将它们堆叠在一起,我有大约五个不同的div,我不得不交换位置.

Answer 2

这个问题已经有了一个很好的答案,但本着探索所有可能性的精神,这是另一种重新排序dom元素同时仍然允许它们占据空间的技术,这与绝对定位方法不同.

这种方法适用于所有现代浏览器和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;
}

这会将元素从1,2,3重新排序到2,3,1.基本上任何设置为table-header-group的显示都将位于顶部,而table-footer-group位于底部.表自然地,table-row-group将元素放在中间.

这种方法很快得到了很好的支持,并且需要比flexbox方法少得多的css,所以如果你只想换一些项目用于移动布局,那么就不要排除这种技术.

您可以在codepen上查看现场演示:http://codepen.io/thepixelninja/pen/eZVgLx

Answer 3

接受的答案适用于大多数浏览器,但由于某些原因,在iOS Chrome和Safari浏览器上,应该显示的内容被隐藏.我尝试了一些其他步骤,迫使内容叠加在一起,最后我尝试了以下解决方案,给了我预期的效果(在移动屏幕上切换内容显示顺序),没有堆叠或隐藏内容的错误:

.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}

Answer 4

仅使用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>

http://jsfiddle.net/thirtydot/hLUHL/

Answer 5

这个解决方案对我有用：

使用父元素，如：

.parent-div {
    display:flex;
    flex-direction: column-reverse;
}

就我而言，我不必更改需要切换的元素的 css。

Answer 6

假设没有什么可以遵循它们

如果这两个div元素基本上是你的主要布局元素,并没有跟随他们在HTML,然后有一个纯粹的HMTL/CSS的解决方案,需要在这个小提琴所示的正常秩序,并能垂直翻转如本小提琴使用一个额外的包装器,div如下所示:

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

如果要素遵循这些div的这是行不通的,因为这个小提琴说明如果下列元素不裹的问题(他们得到的重叠#first_div),并且这个小提琴说明如果以下元素也包裹了问题(在#first_div与变化位置都在#second_div 和以下元素).这就是为什么,根据您的使用案例,这种方法可能会或可能不会.

对于整体布局方案,其中所有其他元素存在于两个div中,它可以工作.对于其他情况,它不会.

Answer 7

在某些情况下，您可以只使用flex-box属性order。

很简单的：

.flex-item {
    order: 2;
}

参见：https : //css-tricks.com/almanac/properties/o/order/