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;
  }
}
}

不幸的是,我不能在"1"下滑动列"3".我该怎么办？

Codepen:http://codepen.io/tomekbuszewski/pen/PbprJP？editors = 1100

Answer 1

您可以float: right改为使用所有三个元素。与媒体查询中适当的宽度定义一起，这应该可以工作。