仅使用 CSS 交换 DIV 位置

发布于07月04日

我正在try 将两个div的位置交换为响应性设计(根据浏览器的宽度/适合移动设备，该网站看起来有所不同).

现在我有这样的 idea :

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

但是，是否有可能交换他们的位置，使其看起来像是第一个second_div，只使用CSS？HTML保持不变.我试过使用花车之类的东西，但似乎不是按照我想要的方式工作.我不想使用绝对定位，因为div的高度总是在变化.有没有什么解决方案，或者根本没有办法做到这一点？

其中的解决方案效果非常好.虽然它不支持旧的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，我必须围绕着浮球的位置交换.