如何并排更改div以在移动设备上堆叠？

Question

我正在尝试让我的 2 个 div（并排）在移动设备上查看时更改为堆叠 div，如 fiddle 所示，但我想要 "two to be on top and "一个”成为第二。

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width: 767px) {
  .one {
    width: 100%;
  }
  .two {
    width: 100%;
  }
}

<div class="one">one</div>
<div class="two">two</div>

我知道简单的解决方案是交换 div 1 和 2，但由于我的代码很复杂，我希望有一个更简单的解决方案，只使用 CSS。

Answer 1

考虑到您不想交换它们。这是 fiddle：https://jsfiddle.net/c8x49afg/ 只需使用 position relative 将第二个向上拉，将第一个向下推。

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width:767px) {
  .one {
    position: relative;
    top: 110px;
    width: 100%;
  }
  .two {
    position: relative;
    top: -100px;
    width: 100%;
  }
}

<div class="wrapper">
  <div class="one">
    one
  </div>


  <div class="two">
    two
  </div>
</div>

Answer 2

更新

在下面添加了一个 flexbox 方法：

UPATED JSFIDDLE

.wrap {
  display: flex;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .wrap {
    flex-direction: column-reverse;
  }
  .one,
  .two {
    width: auto;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

原回答

如果您受困于标记，您仍然可以使用神奇的 css table 布局来更改 2 个 div 的顺序。我全部更新了，只是为了保持一致性。

这些 display 值是如何工作的，来自 MDN:

display: table; - behaves like <table> element.

display: table-cell; - behaves like <td> element.

display: table-header-group; - behaves like <thead> element.

display: table-footer-group; - behaves like <tfoot> element.

UPDATED JSFIDDLE

.wrap {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.one,
.two {
  display: table-cell;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .one {
    display: table-footer-group;
    width: 100%;
  }
  .two {
    display: table-header-group;
    width: 100%;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

Answer 3

在无法在移动设备上更改源顺序的企业 CMS 中工作时，我需要做这件事。

我使用的解决方案是为两个 Div 设置一个通用容器，并将其显示为 table。然后，您可以将要首先显示的 Div 设置为 display:table-group-header，并将要在其后显示的设置为 display:table-group-footer

如果您想保留彩色边框，您可能需要为每个内容引入一个内部 div。

我创建了一个 Fiddle 来展示它的实际效果： http://jsfiddle.net/0brc4xc7/

如何并排更改div以在移动设备上堆叠？

How to change side by side divs to stack on mobile?

html

css

media-queries

responsive-design