如何在移动设备或平板电脑上更改列的堆栈顺序?
例如,它在宽屏幕上是水平的,但是当它缩小时我想要2
在顶部.我不想改变html结构来做到这一点.
工作实例如下:
1
2
根据当前的bulma版本
v0.3.1
,可以使用更改列顺序的这种功能.
但是,您可以定义自定义样式以更改移动设备,平板电脑或所需的任何分辨率的顺序.
.reverse-columns
例如,您可以定义自定义类,并使用以下样式将其添加到父级:
@media(max-width: 767px) { /* <== You can change this break point as per your needs */ .reverse-columns { flex-direction: column-reverse; display: flex; } }
@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");
@media(max-width: 767px) {
.custom-columns {
flex-direction: column-reverse;
display: flex;
}
}
1
2