CSS flexbox 3列桌面到2列平板电脑，重新订购flex项目

Question

我试图用flexbox解决问题，但无法弄清楚如何解决问题。

这是我想要的桌面

这就是我想要的平板电脑

＆＃13;

＆＃13;

.wrapper {
  display: flex;
}
.premiumContent,
.aside1Content,
.aside2Content {
  font-size: 2em;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.premiumContent {
  order: 2;
  flex: 1;
  background-color: red;
  height: 100px;
}
.aside1Content {
  order: 1;
  flex: 1;
  background-color: blue;
  height: 40px;
}
.aside2Content {
  order: 3;
  flex: 1;
  background-color: green;
  height: 40px;
}

＆＃13;

<div class="wrapper">
  <div class="premiumContent">premium</div>
  <div class="aside1Content">aside 1</div>
  <div class="aside2Content">aside 2</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你想玩游戏，我做了一个codepen：

https://codepen.io/martinratinaud/pen/rjBbLz?editors=1100

编辑：以下是使用正确的媒体查询https://codepen.io/martinratinaud/pen/QdLRNO

的已解决示例

谢谢！

Answer 1

对移动版面使用媒体查询：

@media ( max-width: 600px) {
  .wrapper {
    flex-direction: column;
    flex-wrap: wrap;
    height: 80px;
  }
  .premiumContent, .aside1Content, .aside2Content {
    width: 50%;
    flex: 0 0 50%;
  }
  .premiumContent {
    order: 4;
    flex-basis: 100%;
  }
}

revised codepen

Answer 2

请注意，Michael_B的解决方案是正确的flexbox解决方案。这个用position:absolute和margin-right用于在移动设备上进行定位，特殊情况是父级的高度无法在CSS中预先确定或硬编码。

＆＃13;

＆＃13;

body { padding: 0; margin: 0;}
.wrapper {
  display: flex;
  align-items: flex-start;
}
.wrapper > * {
  padding: .5em;
  font-size: 1.5rem;
  line-height: 1.5em;
  color: white;
  flex: 1 0 auto;
  box-sizing: border-box;
}

.premiumContent {
  background-color: red;
  line-height: 3em;
}
.aside1Content {
  order: -1;
  background-color: blue;
}
.aside2Content {
  background-color: green;
}
@media (max-width: 800px) {
  .wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
  }
  .wrapper > * {
    padding: .5em;
    font-size: 1.5rem;
    line-height: 1.5em;
    color: white;
    flex: 1 0 auto;
    margin-right: 50%;
  }
  .wrapper .premiumContent {
    min-width: 50%;
    min-height: 100%;
    order: 3;
    width: 50%;
    position: absolute;
    right: 0;
    height: auto;
    flex-grow: 0;
    align-self: initial;
    margin-right: 0;
  }
  .aside1Content {
    order: initial;
    background-color: blue;
  }
}

＆＃13;

<div class="wrapper">
  <div class="premiumContent">premium</div>
  <div class="aside1Content">aside 1</div>
  <div class="aside2Content">aside 2</div>
</div>

＆＃13;

＆＃13;

＆＃13;

完全加前缀的CSS：

＆＃13;

＆＃13;

body { padding: 0; margin: 0;}
.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.wrapper > * {
  padding: .5em;
  font-size: 1.5rem;
  line-height: 1.5em;
  color: white;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
     -moz-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.premiumContent {
  background-color: red;
  line-height: 3em;
}
.aside1Content {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
     -moz-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  background-color: blue;
}
.aside2Content {
  background-color: green;
}
@media (max-width: 800px) {
  .wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    position: relative;
  }
  .wrapper > * {
    padding: .5em;
    font-size: 1.5rem;
    line-height: 1.5em;
    color: white;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
       -moz-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    margin-right: 50%;
  }
  .wrapper .premiumContent {
    min-width: 50%;
    min-height: 100%;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
       -moz-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    width: 50%;
    position: absolute;
    right: 0;
    height: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
       -moz-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-align-self: initial;
        -ms-flex-item-align: initial;
                -ms-grid-row-align: initial;
            align-self: initial;
    margin-right: 0;
  }
  .aside1Content {
    -webkit-box-ordinal-group: NaN;
    -webkit-order: initial;
       -moz-box-ordinal-group: NaN;
        -ms-flex-order: initial;
            order: initial;
    background-color: blue;
  }
}

＆＃13;

＆＃13;

＆＃13;