如何更改手机或平板电脑上的列的堆叠顺序?
例如,它在宽屏幕上是水平的,但当它缩小时,我希望trap
位于顶部。我不想改变html结构来做到这一点。
工作示例如下:
2

答案 0 :(得分:11)
根据当前的bulma版本
v0.3.1
,有这样的功能 可以改变列的顺序。
但是,您可以定义自定义样式以更改移动设备,平板电脑或您想要的任何分辨率的顺序。
例如,您可以定义自定义类.custom-columns
,并将其添加到具有以下样式的父级:
@media(max-width: 767px) { /* <== You can change this break point as per your needs */
.custom-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;
}
}
<div class="columns custom-columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
答案 1 :(得分:1)
@media(max-width: $desktop) {
.columns.is-reversed-touch {
flex-direction: column-reverse;
display: flex;
}
}
@media(max-width: $tablet) {
.columns.is-reversed-mobile {
flex-direction: column-reverse;
display: flex;
}
}
您总是可以为宽屏等添加更多规则,但这通常是您需要的。
flex-direction: row-reverse;
是我将用于.columns.is-mobile.is-reversed-mobile
的东西。因此,您也可以添加该规则。