我有一个flex容器,在普通屏幕上并排显示两个div.
[div1] [div2]
当它们包裹在较小的设备上时,最终会变为
[div1]
[div2]
我想要的是让他们出现
[div2]
[div1]
如果使用媒体查询,这是微不足道的,但我有一个非常动态的布局,这使得这是不可行的,我使用弹性框的全部原因是试图避免繁琐/无法获得的媒体查询.
是否有一些灵活的flex CSS属性组合可以提供我想要的行为？我已经玩了很多但没有成功,但觉得这必须是一个相对常见的CSS’想要’,所以希望有人在这里可以在几秒钟内回答这个问题！
最佳答案
事实证明这很简单.只需使用flex-direction：row-reverse;
https://jsfiddle.net/gveukj1j/
HTML：
CSS：
/* the relevant CSS */
#container{display:flex;flex-wrap:wrap;flex-direction:row-reverse}
#container>div{flex-basis:400px;flex-shrink:0}
/* CSS to make the demo clear */
#container>div{line-height:200px;height:200px;color:#fff;text-align:center}
#div1{background:blue}
#div2{background:red}
