代码之家 › 专栏 › 技术社区 › Simon Jensen

CSS更改列之间内容的顺序

css html

Simon Jensen · 技术社区 · 6 年前

我有几个区域的内容,我想在另一个顺序根据视口使用。

在 大屏幕 ,我想要两列,等等 小屏幕

我真的很想保留 flex-columns order -不成功的财产。

下面的调整大小应该是自我解释,但我需要在两列的东西在较大的视口和东西在另一个较小的视口顺序。

See JSFiddle here

@media only screen and (min-width: 601px) {
  p {
    margin: 0;
  }
  .container {
    width: 100%;
    min-height: 100%;
    background: yellow;
    align-content: flex-start;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
  }
  .flexcolumntop {
    flex: 50%;
    max-width: 50%;
    margin: 0;
  }
  .flexcolumnbottom {
    flex: 50%;
    max-width: 50%;
    margin: 0;
  }
  .red {
    background: red;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .blue {
    background: blue;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .green {
    background: green;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .lime {
    background: lime;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .pink {
    background: pink;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .gray {
    background: gray;
    width: 150px;
    height: 150px;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  p {
    margin: 0;
  }
  .container {
    width: 100%;
    min-height: 100%;
    background: yellow;
    align-content: flex-start;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
  }
  .flexcolumntop {
    flex: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .flexcolumnbottom {
    flex: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .red p::before {
    content: "Order: 2";
  }
  .red {
    background: red;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .blue p::before {
    content: "Order 5: ";
  }
  .blue {
    background: blue;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .green p::before {
    content: "Order: 1";
  }
  .green {
    background: green;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .lime p::before {
    content: "Order: 4";
  }
  .lime {
    background: lime;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .pink p::before {
    content: "Order: 6";
  }
  .pink {
    background: pink;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .gray p::before {
    content: "Order: 3";
  }
  .gray {
    background: gray;
    width: 150px;
    height: 150px;
    text-align: center;
  }
}

<div class="container">
  <div class="flexcolumntop">
    <div class="red">
      <p>
        Red
      </p>
    </div>
    <div class="blue">
      <p>
        Blue
      </p>
    </div>
    <div class="pink">
      <p>
        Pink
      </p>
    </div>
  </div>
  <div class="flexcolumnbottom">
    <div class="green">
      <p>
        Green
      </p>
    </div>
    <div class="gray">
      <p>
        Gray
      </p>
    </div>
    <div class="lime">
      <p>
        Lime
      </p>
    </div>
  </div>
</div>

2 回复 | 直到 6 年前

vicbyte 6 年前

这是很容易解决的使用 flexbox 和 order

.morder 只为移动版本设置订单的类。还做了一些小的html更改(每个颜色元素现在都有一个 .flexcol 父项和项的顺序不同,但是可以使用 秩序

p {
  margin: 0;
}
.container {
  width: 100%;
  min-height: 100%;
  background: yellow;
  align-content: flex-start;
  display: flex;
  display: -webkit-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
}
.flexcol {
  flex: 50%;
  margin: 0;
}
.red, .blue, .green, .lime, .pink, .gray {
  width: 150px;
  height: 150px;
  text-align: center;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.lime {
  background: lime;
}
.pink {
  background: pink;
}
.gray {
  background: gray;
}
  
@media only screen and (max-width: 600px) {
  .flexcol {
    flex: 100%;
  }
  .morder-1 {
    order: 1;
  }
  .morder-2 {
    order: 2;
  }
  .morder-3 {
    order: 3;
  }
  .morder-4 {
    order: 4;
  }
  .morder-5 {
    order: 5;
  }
  .morder-6{
    order: 6;
  }
}

<div class="container">
  <div class="flexcol morder-2">
    <div class="red">
      <p>
        Red
      </p>
    </div>
  </div>
  <div class="flexcol morder-1">
    <div class="green">
      <p>
        Green
      </p>
    </div>
  </div>
  <div class="flexcol morder-5">
    <div class="blue">
      <p>
        Blue
      </p>
    </div>
  </div>
  <div class="flexcol morder-3">
    <div class="gray">
      <p>
        Gray
      </p>
    </div>
  </div>
  <div class="flexcol morder-6">
    <div class="pink">
      <p>
        Pink
      </p>
    </div>
  </div>
  <div class="flexcol morder-4">
    <div class="lime">
      <p>
        Lime
      </p>
    </div>
  </div>
</div>

vicbyte 6 年前

与 Grid layout grid-template-areas 定义子元素在栅格布局下的位置。当要修改某些视口中元素的顺序时,您只需更改 网格模板区域 grid-area 指定此元素的位置

.container {
    width: 100%;
    min-height: 100%;
    background: yellow;
    align-content: flex-start;
    display: grid;
    grid-template-areas: "topblue topred"
                         "bottomgray bottomgreen";
}

.red {
    grid-area: topred;
    background: red;
    text-align: center;
}

.blue {
    grid-area: topblue;
    background: blue;
    text-align: center;
}

.green {
    grid-area: bottomgreen;
    background: green;
    text-align: center;
}

.gray {
    grid-area: bottomgray;
    background: gray;
    text-align: center;
}

@media all and (max-width: 600px) {
    .container {
        grid-template-areas: "topred"
                         "topblue"
                         "bottomgreen"
                         "bottomgray";
    }
}

<div class="container">
    <div class="red">
      Red <br /><br /> Column 2, Top
    </div>
    <div class="blue">
      Blue <br /><br /> Column 1, Top
    </div>
    <div class="green">
      Green <br /><br /> Column 2, Bottom
    </div>
    <div class="gray">
      Gray <br /><br /> Column 1, Bottom
    </div>
</div>

另外,要注意 browser support of css grid