css - Flexbox - 两个小元素紧挨着一个大元素

Question

我需要一个在移动设备上看起来像这样的布局

-----
| 1 |
-----
| 2 |
-----
| 3 |
-----

在桌面上像这样:

---------
|   | 1 |
| 2 |---|
|   | 3 |
|   |----
|   |
-----

我决定使用 flexbox，到目前为止我的代码:

<div class="row">
  <div class="col-xl secound">2</div>
  <div class="col-sm first">1<br>2<br>3<br>4</div>
  <div class="col-xl third">3</div>
</div>

.row {
  display: flex;
  flex-flow: row wrap;
}

.col-sm,
.col-xl {
  width: 100%;
}

.col-sm {
  background: yellow;
}

.col-xl {  
  &.secound {
    background: #ccc;
  }

  &.third {
    background: #aaa;
  }
}

@media (min-width: 700px) {
.col-sm {
  width: 25%;
  background: yellow;
  order: 1;
}

.col-xl {
  width: 75%;

  &.secound {
    background: #ccc;
    order: 2;
  }

  &.third {
    background: #aaa;
    order: 3;
  }
}
}

不幸的是，我无法滑动列“3”到“1”下。我应该怎么办？

代码笔:http://codepen.io/tomekbuszewski/pen/PbprJP?editors=1100

Answer 1

您可以尝试在桌面上使用 float，并在移动设备上使用设置了 order 的 flexbox。

jsFiddle

.item-1 {background:aqua;}
.item-2 {background:gold;}
.item-3 {background:pink;}

.row {
  overflow: hidden;
}
.item {
  width: 50%;
}
.item-2 {
  float: left;
}
.item-1,
.item-3 {
  overflow: hidden;
}
@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  .item {
    width: auto;
    float: none;
  }
  .item-1 {
    order: -1;
  }
}

<div class="row">
  <div class="item item-2">2<br><br><br></div>
  <div class="item item-1">1</div>
  <div class="item item-3">3</div>
</div>