Css 灵活布局流体和固定宽度

我偶然发现了flex，我正在尝试创建一个这样的布局

<div class="charts">
  <div class="chart longer">
  </div>
  <div class="chart short">
  </div>
</div>

从这里开始，我希望较长的div保持流动并为100%，而

.chart.sort

则清除到新行，并在以下断点处占据100%的宽度

  @media only screen and (max-width: 767px) {
    // Help needed here
  }

---

在

768px

下面，您可以将

flex direction:column

指定给父元素。子元素将延伸到

100%宽度

.charts{
显示器：flex；
弹性：1；
}
.图表。更长{
弹性：1；
背景：番茄；
}
.简图{
flex:00200px；
背景：浅蓝色；
}
@仅介质屏幕和（最大宽度：767px）{
.图表{
弯曲方向：立柱；
}
}

A.
B

  @media only screen and (max-width: 767px) {
    // Help needed here
  }