仅使用CSS交换DIV位置

我正在尝试将两个divs位置交换为响应式设计（该网站的外观根据浏览器的宽度/适用于移动设备而有所不同）。

现在我有这样的事情：

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

但是是否有可能second_div仅使用CSS来交换其放置位置，使其看起来像是第一个？HTML保持不变。我已经尝试过使用浮点数和其他东西，但是它似乎并没有达到我想要的方式。我不想使用绝对定位，因为divs的高度总是在变化。有什么解决办法，还是没有办法做到这一点？

有人联系我：什么是移动这是在顶部以自适应设计下一个元素的最佳途径。

该解决方案完美地工作了。尽管它不支持旧版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位置上互换。

这个问题已经有了一个很好的答案，但是本着探索所有可能性的精神，这是另一种对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

可接受的答案适用于大多数浏览器，但是由于某些原因，在iOS Chrome和Safari浏览器上，本应显示为第二的内容被隐藏了。我尝试了一些其他步骤，使内容相互叠加，最终，我尝试了以下解决方案，该解决方案可以达到预期的效果（在移动屏幕上切换内容显示顺序），而不会出现叠加或隐藏内容的错误：

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

.section1,
.section2 {
  height: auto;
}

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

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

很简单的：

.flex-item {
    order: 2;
}

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

假设什么也没有

如果这两个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中的整体布局方案，它可以正常工作。对于其他情况，则不会。

此解决方案为我工作：

使用像这样的父元素：

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

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

假设两个元素都具有50％的宽度，这就是我所使用的：

CSS：

  .parent {
    width: 100%;
    display: flex;
  }  
  .child-1 {
    width: 50%;
    margin-right: -50%;
    margin-left: 50%;
    background: #ff0;
  }
  .child-2 {
    width: 50%;
    margin-right: 50%;
    margin-left: -50%;
    background: #0f0;
  }

的HTML：

<div class="parent">
  <div class="child-1">child1</div>
  <div class="child-2">child2</div>
</div>

例如：https：//jsfiddle.net/gzveri/o6umhj53/

顺便说一句，此方法适用于一长串元素中的任意两个附近元素。例如，我有一个很长的元素列表，每行有2个项目，并且我希望列表中的每个第3位和第4位元素都可以交换，以便它以国际象棋风格呈现元素，然后使用以下规则：

  .parent > div:nth-child(4n+3) {
    margin-right: -50%;
    margin-left: 50%;
  }
  .parent > div:nth-child(4n+4) {
    margin-right: 50%;
    margin-left: -50%;
  }