Html 环绕DIV上方，中心DIV停留在中间

我不知道使用纯CSS是否可以做到这一点：

我的应用程序中有两个元素：

• 时间轴组件（蓝色）
• 图例组件（绿色）

时间轴（蓝色）组件应始终居中，图例（绿色）组件应与右侧对齐

我无法解决的问题如下。如果两者都没有空间，则图例（绿色）组件应包裹在时间线（蓝色）组件的上方，时间线组件应保持在中间，如下图所示：

我能接近的是：

.content{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.时间线{
宽度：300px；
高度：40px；
背景颜色：蓝色；
}
.鬼魂{
宽度：120px；
高度：40px；
}
.传奇{
宽度：120px；
高度：40px；
背景颜色：绿色；
}
上校中心{
柔性生长：1；
显示器：flex；
证明内容：中心；
}

试试这个：

.col-center {
  order: 1;
}