使用媒體查詢在小螢屏上切換列順序

我創建了 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>

uj5u.com熱心網友回復：

您可以使用 切換方向flex-direction，請參閱MDN 檔案關于 flex-direction。

在媒體查詢中使用，這可以在較小的螢屏上反轉順序：

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

uj5u.com熱心網友回復：

編輯以在小螢屏尺寸下顯示堆疊效果

您可以使用 CSS Grid，它可以讓您完全控制使用 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>

標籤：html css 网络

上一篇：Javascript中的變數更新

下一篇：為什么我需要在django中使用虛擬環境？[復制]