如何在移动设备上并排改变堆叠？

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

Answer 1

更新

在下面添加了一个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表格布局来改变2个div的顺序.我更新了所有内容,只是为了保持一致性.

这些display价值观如何运作,来自MDN:

display: table;- 表现得像<table>元素.

display: table-cell;- 表现得像<td>元素.

display: table-header-group;- 表现得像<thead>元素.

display: table-footer-group;- 表现得像<tfoot>元素.

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>