基于卡片的双列布局，适用于使用flexbox的桌面和移动设备

Question

我想制作一个两列html结构，如下图所示：

每个框内的数字表示html标记中div's的顺序。

挑战在于我希望在移动设备上使用不同的排序顺序。例如，在移动设备上，数字4应低于数字1而不更改html。我认为使用flexbox应该是实现这一目标的最佳方式。但我无法使其发挥作用。

使用floats并不是这样，因为在第一边有空格时，下一个div会自动浮动到那一边。

我也无法为每列制作额外的包装器，因为使用order将不起作用。

有人有想法吗？

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.row {
  display: inline-block;
  width: 100%;
}
.item {
  border: 1px solid #000;
  width: 50%;
  float: left;
}

＆＃13;

<div class="row">
  <div style="height:200px;" class="item">1</div>
  <div style="height:150px;" class="item">2</div>
  <div style="height:100px;" class="item">3</div>
  <div style="height:50px; float:right;" class="item">4</div>
  <div style="height:75px; float:right;" class="item">5</div>
  <div style="height:150px; float:right;" class="item">6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下代码功能：

• 列方向柔性容器
• Flex项目以视口高度换行
• 在较小的屏幕上（基于高度或宽度），第四个项目按视觉顺序移动到第二个位置，并且项目在一个全宽列中对齐。

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
}

.row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
    max-width: 100vw;
}

.item {
    width: 45%;
    margin: 5px;
    border: 1px solid #000;

}

@media ( max-width: 500px ), ( max-height: 500px ) {
    .row { flex-direction: row; }
    .item { flex-basis: 100%; }
    .item:nth-child(1) { order: -2; }    
    .item:nth-child(4) { order: -1; }
}

＆＃13;

<div class="row">
    <div style="height:200px;" class="item">1</div>
    <div style="height:150px;" class="item">2</div>
    <div style="height:100px;" class="item">3</div>
    <div style="height:50px;" class="item">4</div>
    <div style="height:75px;" class="item">5</div>
    <div style="height:150px;" class="item">6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle