Html 为手机和桌面重新安排flex项目

我正在尝试使用flex制作以下布局：

我可以用flex做这个布局吗

.objectref使用.page头{
显示器：flex；
弯曲方向：行；
}
.objectref使用.page header.header列{
弹性：1；
显示器：flex；
}
.objectref使用.page header.header内容{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
}
.objectref使用.page header.header内容。合并内容{
柔性包装：nowrap；
}
.objectref使用.page header.objectref标题{
右边距：8px；
}
.objectref使用.page header.objectref-title.header-col{
调整内容：灵活启动；
}
.objectref使用.page header.objectref title.header内容{
flex:01自动；
背景：蓝色；
}
.objectref使用.page header.objectref时间线{
flex:035px；
显示器：flex；
}
.objectref使用.page header.objectref timeline.header内容{
背景：粉红色；
弹性：1100%；
}
.objectref使用.page header.objectref-menu.header-col{
证明内容：柔性端；
}
.objectref使用.page页眉.objectref菜单.页眉内容{
flex:01自动；
背景：绿色；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.页眉{
弯曲方向：立柱；
}
.页面标题.标题行{
弯曲方向：行；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
.页眉{
弯曲方向：立柱；
}
.页眉.页眉列{
弹性：1；
}
.page header.objectef时间线{
保证金：0；
}
}

此处的标题（可以是Looong）[block 1]
下一行的文本
时间线[第3块]
这里的按钮组很少[块2]
下一行的文本

是的，您可以使用css

order

属性更改

此外，您还可以更改flex元素的宽度，将某些元素堆叠在彼此的顶部，等等。。。通过调整

flex

值

看看这个

ul{
显示：-webkit flex；
显示器：flex；
柔性包装：包装；
填充：0；
保证金：0；
边缘底部：25px；
}
李{
背景：浅蓝色；
文本对齐：居中；
弹性：01 50%；
列表样式：无；
}
.一{
背景：绿色；
-网络工具包订单：2份；
顺序：2；
}
.二{
背景：橄榄；
-网络工具包订单：3份；
顺序：3；
}
.三{
-网络工具包订单：1；
顺序：1；
弹性：10100%；
}
.4、.5、.6{
边框：1px纯红；
弹性：1；
}
.7、.8、.9{
边框底部：1px纯白；
flex：无；
显示：块；
宽度：100%；
}

1
2
3


1
2
3


1
2
3

您当前的css是什么？对不起。这是我的密码：问题已经结束，所以我不能发布正式答案。但我想这正是你想要的：迈克尔，谢谢！谢谢我知道order和flex，但我不能像图中那样在css中制作变更单和flex方向的布局和样式。列中的第1、2、3部分-正常。第1、2、3行-正常。但是对于最大宽度992px和1,3,2，对于其他宽度-编号：（@AlexandrShchetinin）如果您发布当前代码，您的问题将对每个人都清楚，并且您将避免回答不符合您需要的问题