Question

有四个孩子div。这些在桌面上可见，如下所示：

First Text | Second Text | Third Text | Fourth Text

在移动设备中，他们会这样：

First Text  |  Third Text
Second Text |  Fourth Text

此块的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。但是，由于数据，元素等来自动态方式（类似于ng-repeat方式的angularjs），我无法在页面加载后获得这些值。对于那些复杂性，我找到了正确的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>

Answer 2

你可以使用flexbox：

http://codepen.io/anon/pen/ZpmQYd

您将容器定义为flex-container：

.row { display: flex }

在媒体查询中，您添加flex-wrap: wrap;以允许这两行。

然后将order设置添加到子元素（在媒体查询中）：

.one {
    order: 1;
  }
  .two {
    order: 3;
  }
  .three {
    order: 2;
  }
  .fourth {
    order: 4;
  }

不要忘记：擦除所有花车。

Answer 3

喜欢这样的作品：

<!DOCTYPE html>
<html>
<head>
  <title>Postgraduate students</title>
  <style type="text/css">
      .col {
        float: left;
        width: 25%;
      }

      @media screen and (max-width: 480px) {
          .col {
            width: 50%;

          }

        }
  </style>
</head>
<body align = "center">

<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>
 </body>

强制将一些子元素强制到右侧

3 个答案: