具有两列的 Flexbox 行，为窄屏幕重新排序

Question

我正在尝试使用 flexbox 创建一个响应式布局，其中一对项目（两个和四个）需要堆叠，在大屏幕上紧挨着第三部分，但在窄屏幕上，顺序需要改变，使它们堆叠，一，二，三，四。

我有一个解决方案，但它不是 DRY，正如您在我复制了第四部分的片段中看到的那样。

是否可以在不重复的情况下使用 flexbox 实现此目的？

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid red;
}
.section {
  border: 1px solid green;
  flex-grow: 1;
}
.one, .two, .four {
  width: 100%;
}
.sub-container {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
}
.mobile-only {
  display: none;
}
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .sub-container {
    width: 100%;
  }
  .section {
    width: 100%;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

<div class="container">
  <div class="section one">One</div>
  <div class="sub-container">
    <div class="section two">Two</div>
    <div class="section four desktop-only">Four</div>
  </div>
  <div class="section three">Three</div>
  <div class="section four mobile-only">Four</div>
</div>

Answer 1

Flexbox 不是为构建二维网格（列和行可以相交）而设计的。因此，为了让您的布局能够使用 flex 属性工作，您将不得不在那里进行破解。

这里有一个更完整的问题解释：

Is it possible for flex items to align tightly to the items above them?

但是，使用 CSS 网格，您的布局简单易行。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 5px;
  grid-template-areas: " one one "
                       " two three "
                       " four three ";
}

.one   { grid-area: one; }
.two   { grid-area: two; }
.three { grid-area: three; }
.four  { grid-area: four; }

@media ( max-width: 600px ) {
  .container {
       grid-template-columns: 1fr;
       grid-template-areas: " one "
                            " two "
                            " three"
                            " four ";
       }
}

/* non-essential; just for demo */
.section {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="section one">One</div>
  <div class="section two">Two</div>
  <div class="section three">Three</div>
  <div class="section four">Four</div>
</div>

https://jsfiddle.net/9fyprm3u/

网格规范提供了多种设计网格的方法。在这种情况下，我使用了 grid-template-areas 属性，它允许您使用 ASCII 艺术来布置网格项目。

browser support

具有两列的 Flexbox 行，为窄屏幕重新排序

Flexbox row with two columns, reordered for narrow screens

html

css

flexbox

css-grid