将div重新排序为表格单元格

Question

让我们说我的布局如下：

CSS：

#wrapper {display:table;}
#one, #two, #three {display: table-cell}

HTML：

<div id="wrapper">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>

因此，默认情况下，输出显示为：

OneTwoThree

我正在尝试重新排序，因此#one和#three在同一行中保持在一起，而#two在下方。在阅读了类似的问题后，我认为以下方法可以解决问题：

CSS：

@media screen and (max-width: 640px) {
  #two {display:table-footer-group;}
}

但是，显示：

One
Three
Two

我所追求的结果应该是：

OneThree
Two

任何人都可以用我的方法指出问题以及如何最好地解决它？

Answer 1

使用display: table-row代替display: table-col。 我认为基于flex的解决方案更好=）

＆＃13;

＆＃13;

#wrapper {
  display: table;
}
#one, 
#two, 
#three {
  display: table-row;
}
#two {
  display:table-footer-group;
}

＆＃13;

<div id="wrapper">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
</div>

＆＃13;

＆＃13;

＆＃13;