使用媒体查询在较小的屏幕上切换列顺序

Question

我创建了2列和4行，每个都是一个flex元素，它变成文本-图片，然后切换。

当您调整窗口大小时，它会变成

text-img-img-text

，但我想要

text-img-text-img

。

.row1, .row2, .row3, .row4 {
      display: flex;
      flex-wrap: wrap;
      margin: 0 7.5vw 3vw 7.5vw;
      /* border:3px solid blue; */
}
    
/* Create four equal columns */
.column {
      box-sizing: border-box;
      flex: 50%;
      margin-top:5vw;
      border:3px solid black;  
}
    
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
    .column {
        flex: 50%;
    }
}
    
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .row1 {
        flex-direction: column;
    }
}
  
.strat1, .strat2, .strat3, .strat4 {
        box-sizing: border-box;
        flex: 50%;
        /* margin-left:10vw; */
        margin-right:5vw; 
        /* margin-top:5vw; */
        /* transform: translateY(4vw); */
        border:3px solid black; 
}

.strat1 h1, .strat2 h1, .strat3 h1, .strat4 h1 {
        display: block;
        font-size: 2.2rem;
        overflow-wrap: break-word;
        text-align: center;
}
    
.strat1 p,.strat2 p,.strat3 p,.strat4 p {
        display: block;
        overflow-wrap: break-word;
        font-size: 1.1rem;
        line-height: 1.8rem;
}

img {
    width:25rem;
    height:20rem;
    /* transform: translateY(6vw);   */
}

.strat2-img, .strat4-img {
    float:right;
    margin-right:4vw;
}

.strat1-img, .strat3-img {
    margin-left:4vw;
}

    <div class="row1">
        <div class="column" >
            <div class="strat1">
                <h1>Getting Ahead</h1>
                <p>some text</p>
            </div>
        </div>
        <div class="column" >
            <div class="strat1-img">
                <img src="pics/gettingahead.jpeg">
            </div>
        </div>
    </div>

    <div class="row2">
        <div class="column" >
            <div class="strat2-img">
                <img src="pics/understanding.jpeg">
            </div>
        </div>
        <div class="column" >
            <div class="strat2">
                <h1>Understanding</h1>
                <p>some text</p>
            </div>
        </div>
    </div>
    <div class="row3">
        <div class="column" >
            <div class="strat3">
                <h1>Goal Setting</h1>
                <p>some text</p>
            </div>
        </div>
        <div class="column" >
            <div class="strat3-img">
                <img src="pics/goalsetting.jpg">
            </div>
        </div>
    </div>
    <div class="row4">
        <div class="column" >
            <div class="strat4-img">
                <img src="pics/passingstandard.jpeg">
            </div>
        </div>
        <div class="column" >
            <div class="strat4">
                <h1>Surpassing The Standard</h1>
                <p>some text</p>
            </div>
        </div>
    </div>

Answer 1

您可以使用

flex-direction

切换方向，请参阅 MDN 关于 flex-direction 的文档。

在媒体查询中使用，这可以颠倒较小屏幕上的顺序：

    @media screen and (max-width: 800px) {
      .row1 {
        flex-direction: column;
      }
      .row2, .row4 { 
        flex-direction: column-reverse; 
      }
    }

Answer 2

编辑以在小屏幕尺寸下显示堆叠效果

您可以使用 CSS 网格，它使您可以使用 order 属性完全控制元素的放置位置。

编辑：要使元素堆叠，只需将 grid-template-columns 更改为您需要的列数即可。我添加了两个媒体查询，一个在中等屏幕宽度下堆叠到 2 列，然后在小屏幕宽度下堆叠到一列。我使用 order 属性使标题适合图像。 /编辑。

请参阅以下示例：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.container>div {
  display: inline-grid;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 800px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .col1 {
    order: 1;
  }
  .col2 {
    order: 3;
  }
  .col3 {
    order: 2;
  }
  .col4 {
    order: 4;
  }
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
  .col1 {
    order: 1;
  }
  .col2 {
    order: 2;
  }
  .col3 {
    order: 3;
  }
  .col4 {
    order: 4;
  }
}

<div class="container">
  <div class="col1">Tree scene</div>
  <div class="col2"><img src='https://picsum.photos/id/10/200'></div>
  <div class="col3">Cute baby deer</div>
  <div class="col4"><img src='https://picsum.photos/id/1003/200'></div>
</div>

Answer 3

实际上有一种方法可以使用 flex 来做到这一点，而无需媒体查询。

只需将行之间的 flex-wrap 属性从“wrap”更改为“wrap-reverse”即可。

.row1, .row3 {
      display: flex;
      flex-wrap: wrap;
    }
    
.row2, .row4 {
      display: flex;
      flex-wrap: wrap-reverse;
    } 

注意：确保您已设置每行内的列的最小宽度，以便它实际上换行而不是仅仅缩小

我必须对不支持媒体查询的电子邮件客户端使用此解决方案。对于网络，@Christian 分享的解决方案应该可以完美运行！