Css 更改flexbox项目的顺序和对齐方式

我问了一个问题，在CSS中创建一个语音气泡，并根据屏幕大小更改气泡的布局。通过使用flexbox来确定气泡箭头的方向和布局，我得到了一些提示。我使用CSS类更改箭头方向，如图所示。在下面的脚本中，我使用自然项顺序来自动布局气泡。我假设主标记只包含一个image标记和一个div（用于speechbubble）

如果图像标签在div前面，我们在左侧布置图像徽标，然后在右侧布置一个语音气泡，箭头指向左侧

如果图像标记位于div后面，我们将图像徽标布置在右侧，并在其前面插入一个语音气泡，箭头指向右侧

但在屏幕尺寸小于600px的情况下，为了避免出现细长的语音气泡，我将垂直重新排列图像和气泡，并始终在顶部显示图像。这是密码

语音{
显示器：flex；
柔性包装：包装；
调整项目：灵活启动；
弯曲方向：行；
}
.言语img：第一个孩子{
顺序：0；
利润率：10px；
边框：3px实心#00CCFF；
盒影：3px 3px 8px 0px rgba（0,0,0,0.3）；
最大宽度：25vw；
右边距：30px；
}
.演讲img：最后一个孩子{
顺序：0；
利润率：10px；
边框：3px实心#00FF99；
盒影：3px 3px 8px 0px rgba（0,0,0,0.3）；
最大宽度：25vw；
左边距：30px；
}
.sp{
背景：#efef；
-webkit边界半径：4px；
边界半径：4px；
字号：1.2rem；
线高：1.3；
最大宽度：95%；
填充：15px；
位置：相对位置；
左：0px；
顶部：20px；
滤镜：投影（6px4px0pxRGBA（0,0,0,0.2））；
边框：1px纯黑；
}
div.sp:在{
左边框：11px实心透明；
右边框：11px实心#efef；
边框顶部：11px实心#EFEF；
边框底部：11px实心透明；
内容：“；
位置：绝对位置；
左：-20px；
顶部：8px；
滤镜：阴影（-2px-1px 0px黑色）；
顺序：0；
}
div.sp:在{
内容：“；
位置：绝对位置；
左边框：11px实心#efef；
右边框：11px实心透明；
边框顶部：11px实心#EFEF；
边框底部：11px实心透明；
右：-20px；
顶部：8px；
滤镜：投影（2px-1px 0px黑色）；
顺序：0；
}
@仅介质屏幕和（最大宽度：600px）{
.演讲{
显示器：flex；
柔性包装：非包装；
弯曲方向：立柱；
背景：#00cc00；
}
.言语img：第一个孩子{
利润率：10px；
边框：3倍纯绿；
盒影：3px 3px 8px 0px rgba（0,0,0,0.3）；
最大宽度：25vw；
右边距：30px；
顺序：-1；
}
div.sp:在{
内容：''；
位置：绝对位置；
顶部：-19px；
左：11px；
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：0px实心透明；
边框顶部：0px实心透明；
边框底部：20px实心#EFEF；
滤镜：投影（1px-2px 0px黑色）；
顺序：0；
}
.语音：第n种类型（2n）{
对齐项目：柔性端；
}
div.sp:在{
内容：''；
位置：绝对位置；
顶部：-29px；
左：84%；；
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：0px实心透明；
边框顶部：0px实心透明；
边框底部：20px纯红；
滤镜：投影（1px-2px 0px黑色）；
顺序：0；
}
.演讲img：最后一个孩子{
利润率：10px；
边框：3件纯蓝；
盒影：3px 3px 8px 0px rgba（0,0,0,0.3）；
最大宽度：25vw；
右边距：0px；
右：0px；
顺序：-1；
}
}

这是我的示例1附加行




这是我的示例2附加行

语音{
显示器：flex；
柔性包装：包装；
调整项目：灵活启动；
弯曲方向：行；
}
.言语img：第一个孩子{
顺序：0；
利润率：10px；
边框：3px实心#00CCFF；
盒影：3px 3px 8px 0px rgba（0,0,0,0.3）；
最大宽度：25vw；
右边距：30px；
}
.演讲img：最后一个孩子{
顺序：0；
利润率：10px；
边框：3px实心#00FF99；
盒影：3px 3px 8px 0px rgba（0,0,0,0.3）；
最大宽度：25vw；
左边距：30px；
}
.sp{
背景：#efef；
-webkit边界半径：4px；
边界半径：4px；
字号：1.2rem；
线高：1.3；
最大宽度：95%；
填充：15px；
位置：相对位置；
左：0px；
顶部：20px；
滤镜：投影（6px4px0pxRGBA（0,0,0,0.2））；
边框：1px纯黑；
}
div.sp:在{
左边框：11px实心透明；
右边框：11px实心#efef；
边框顶部：11px实心#EFEF；
边框底部：11px实心透明；
内容：“；
位置：绝对位置；
左：-20px；
顶部：8px；
滤镜：阴影（-2px-1px 0px黑色）；
顺序：0；
}
div.sp:在{
内容：“；
位置：绝对位置；
左边框：11px实心#efef；
右边框：11px实心透明；
边框顶部：11px实心#EFEF；
边框底部：11px实心透明；
右：-20px；
顶部：8px；
滤镜：投影（2px-1px 0px黑色）；
顺序：0；
}
@仅介质屏幕和（最大宽度：600px）{
.演讲{
显示器：flex；
柔性包装：非包装；
弯曲方向：立柱；
背景：#00cc00；
}
.语音：第n种类型（2n）{
对齐项目：柔性端；
}
.言语img：第一个孩子{
利润率：10px；
边框：3倍纯绿；
盒影：3px 3px 8px 0px rgba（0,0,0,0.3）；
最大宽度：25vw；
右边距：30px；
顺序：-1；
}
div.sp:在{
内容：