css - 强制一些子元素到右侧

Question

有四个子 div。这些在桌面上是这样显示的:

First Text | Second Text | Third Text | Fourth Text

在移动端，它们会像这样:

First Text  |  Third Text
Second Text |  Fourth Text

该 block 的 HTML 结构:

<div class="col one">First Text</div>
<div class="col two">Second Text</div>
<div class="col three">Third Text</div>
<div class="col fourth">Fourth Text</div>

我可以通过多种方式实现这种情况。但是，问题是，它是一个现有元素，不允许我修改任何 HTML 结构。这种情况是否仅适用于 CSS(例如 css flex 或其他方式)？

N:B: div 的高度是动态的，所以使用 position: absolute; 不合适。我什至尝试用 jQuery 计算 div 高度并使用这些值来定位其他 div。但是，由于数据、元素等来自动态方式(类似于 angularjs 的 ng-repeat 方式)，我无法在页面加载后获得这些值。对于这些复杂性，我正在寻找合适的 CSS 解决方案(如果有的话)。

FIDDLE DEMO

更新:

我忘了说一件事。对不起。两个 div 之间不会有额外的垂直空间。

应该是这样的:

Updated Fiddle (作者:@Johannes)

Answer 1

是的，因为你可以使用 FlexBox，所以你可以使用 order 让它工作:

body {display: flex;}
.col {width: 25%;}
@media screen and (max-width: 480px) {
  .col {width: 50%;}
  .one {order: 1;}
  .two {order: 3;}
  .three {order: 2;}
  .fourth {order: 4;}
}

<div class="col one">First Text</div>
<div class="col two">Second Text</div>
<div class="col three">Third Text</div>
<div class="col fourth">Fourth Text</div>