如何在弹性框中设置外部元素

Question

我的代码是

<div className="app-container">
<div className="border-content">
<OptionsPanel />
<TrendingList />
</div>
<div className="tweets-list-container">
<TweetList results={tweets} />
</div>
</div>

和flexbox当前显示在屏幕上，如:

OPTIONS-PANEL | TRENDING-LIST | TWEETS-LIST

但是我想要的是

OPTIONS-PANEL | TWEETS-LIST | TRENDING-LIST (like the twitter page)

我可以做些什么来修复这个CSS?或者我应该重构我的JSX代码?我这样做是因为我的布局是移动优先的，它看起来很好。

Answer 1

如果顺序在不同的断点处是不同的，我的建议是在一个flex容器中有三个组件是兄弟，然后使用flex-order或flex-grow来重新排序或堆叠它们。

https://developer.mozilla.org/en-US/docs/Web/CSS/order