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

Question

我试图让我的 2 个 div（并排）在移动设备上查看时更改为堆叠的 div，如小提琴所示，但我希望“两个位于顶部，“一个”位于第二个。

这是代码 - http://jsfiddle.net/d3d4hb3t/

.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 和 div 2，但由于我的代码很复杂，我希望有一个仅使用 CSS 的更简单的解决方案。

Answer 1

更新

在下面添加了弹性盒方法：

更新的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 表格布局来更改 2 个 div 的顺序。我全部更新了，只是为了保持一致性。

这些

display

值如何发挥作用，来自 MDN：

display: table;

- 行为类似于

<table>

元素。

display: table-cell;

- 行为类似于

<td>

元素。

display: table-header-group;

- 行为类似于

<thead>

元素。

display: table-footer-group;

- 行为类似于

<tfoot>

元素。

更新了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 2

考虑到您不想交换它们。 这是小提琴：https://jsfiddle.net/c8x49afg/ 只需对 div 使用相对位置即可将第二个向上拉动并向下推第一个。

.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 3

在企业 CMS 中工作时，我需要做这件事，因为无法在移动设备上更改源订单。

我使用的解决方案是为两个 Div 设置一个通用容器，并将其显示为表格。然后，您可以将要首先显示的 Div 设置为

display:table-group-header

，并将在其之后显示的 Div 设置为

display:table-group-footer

如果您想保留彩色边框，您可能必须为每个包含内容的内部 div 引入一个。

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

Answer 4

.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>