Question

我有三列，我想换一定屏幕尺寸的顺序。

当前订单是两个1/4宽度的列，其间宽度为1/2。

我想将两个1/4宽度的列放入1/2宽度，并在开头堆叠它们。

我可以使用浮点数复制它，但无法找到使用flexbox的方法。

我努力让两个1/4宽度的列堆叠，同时占父宽度的50％。

这是fiddle。

＆＃13;

.col1of2 {
  width: 50%;
  background: red;
}
.col1of4 {
  width: 25%;
  background: yellow;
}
.col1of4--last {
  background: blue;
}
.col-container {
  display: flex;
}
@media all and (max-width: 1000px) {
  .col1of2 {
    order: 3;
  }
  .col1of4 {
    order: 1;
  }
}
/* css for working example */

.ex1of2 {
  width: 50%;
  background: red;
  float: right;
}
.ex1of4 {
  display: inline-block;
  width: 50%;
  background: yellow;
}
.ex1of4--last {
  background: blue;
}

＆＃13;

<H4>what i have</H4>
<div class="col-container">
  <div class="col col1of4">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of2">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of4 col1of4--last">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

<!-- what i want it to look like when it swaps -->

<H4>what i want to achieve</H4>
<div class="ex-container">
  <div class="ex ex1of4">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="ex ex1of2">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="ex ex1of4 ex1of4--last">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

＆＃13;

Answer 1

此布局的关键是在媒体查询中将弹性容器切换为column wrap。

您还必须为容器定义高度，以便项目知道包装的位置。

.col-container {
  display: flex;
}
.col1of2 {
  width: 50%;
  background: red;
}
.col1of4 {
  width: 25%;
  background: yellow;
}
.col1of4--last {
  background: blue;
}
@media all and (max-width: 1000px) {
  .col-container {
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
  }
  .col1of2 {
    order: 1;
  }
  .col1of4 {
    width: 50%;
  }
}

<div class="col-container">
  <div class="col col1of4">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of2">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of4 col1of4--last">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

revised fiddle

Flexbox：重新排序和堆叠列

1 个答案: