我試圖為“移動”屏幕和大屏幕安排一系列不同布局的元素。

基本上，在手機屏幕上，我希望標題在頂部橫跨整個寬度，居中。下面是同一行右側的一個圖像和一組圖標。

在較大的屏幕上，我希望標題在同一列中的圖像旁邊，但在圖標的上面(查看圖像以獲得想要的結果)。

通過玩flexbox規則和order屬性，我可以達到這個效果的2/3。按照我寫的方式，我可以在圖片旁邊得到標題，但是圖標組總是在圖片下面。

看看我的小提琴，我的嘗試

超文本標記語言

<div class="container">
 <div class="row">
    <h1 class="title">This is my title</h1>
    <div class="image">
     <img src="https://placem.at/things?w=300&h=400">
    </div>
    <div class="icon-section">
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
  </div>
</div>

SCSS

.container {
  max-width: 500px;
  @media (min-width: 800px) {
    max-width: 750px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
}
.title {
  width: 100%;
  text-align: center;
  @media (min-width: 800px) {
    flex: 0 0 50%;
    order: 2;
    text-align: left;
  }
}
.icon-section {
  padding-left: 20px;
  @media (min-width: 800px) {
    display: flex;
    order: 3;
  }
}
.icon {
  @media (min-width: 800px) {
    margin-right: 5px;
  }
}

我不習慣使用flexbox，我對我的標記很靈活。然而，我想避免的是我的標題有兩個實例，并根據屏幕大小隱藏一個。還因為標題將是動態的，我不能使用絕對定位。

我通過結合使用flexbox和傳統的floats解決了這個問題。基本上，我基于大屏幕尺寸外觀編寫標記，并在移動尺寸上使用flexbox來改變元素堆疊時的排序順序。

工作小提琴(你必須調整你的瀏覽器大小才能看到變化)

HTML:

<div class="container">
      <div class="row">

        <div class="image">
         <img src="https://placem.at/things?w=300&h=400">
        </div>
        <h1 class="title">This is my title</h1>
        <div class="meta">
          <div class="icon-section">
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
          </div>
          </div>
      </div>
    </div>

SCSS:

.container {
      max-width: 500px;
      @media (min-width: 800px) {
        max-width: 750px;
      }
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-start;
      align-content: flex-start;
      @media (min-width: 800px) {
        float: left;
        display: block;
      }
    }
    .image {
      order: 2;
      @media (min-width: 800px){
        float: left;
        margin-right: 20px;
      }
    }
    .meta {
      order: 2;
    } 
    .title {
      width: 100%;
      text-align: center;
       order: 1;
      @media (min-width: 800px) {
        text-align: left;
        float: left;
        width: auto
      }
    }
    .icon-section {
      float: left;
      order: 3;
      margin-left: 20px;
      @media (min-width: 800px) {
        display: flex;
        margin-left: 0;
      }
    }
    .icon {
      @media (min-width: 800px) {
       margin-right: 5px;
      }
    }

我認為您只需要將查詢設置為在屏幕大小上工作，就像

@僅媒體屏幕和(最大寬度:500像素)