html - 使用 flexbox 在不同的断点改变布局

Question

我正在尝试为“移动”屏幕和大屏幕以不同的布局安排一系列元素。

基本上，在移动屏幕上，我希望标题在顶部居中横跨整个宽度。下面是同一行右侧的图像和一组图标。

在较大的屏幕上，我希望标题与同一列中的图像相邻，但位于图标上方(有关所需结果，请参见图像)。

通过使用 flexbox 规则和 order 属性，我可以达到这个效果的 2/3。按照我写的方式，我可以在图片旁边找到标题，但图标组总是在图片下方。

See my fiddle for my attempt

HTML

<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，而且我的标记很灵活。然而，我想避免的是我的标题有两个实例，并根据屏幕大小隐藏一个。另外因为标题是动态的，我不能使用绝对定位。

Answer 1

我能够通过结合使用 flexbox 和传统的 float 来解决这个问题。基本上，我根据大屏幕尺寸的外观编写标记，并在移动尺寸上使用 flexbox 来更改元素堆叠时的排序顺序。

The working fiddle (您必须调整浏览器大小才能看到更改)

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;
      }
    }