布尔玛:更改列的堆栈顺序

时间:2017-01-18 01:30:14

标签: css css3 bulma

如何更改手机或平板电脑上的列的堆叠顺序?

例如,它在宽屏幕上是水平的,但当它缩小时,我希望trap位于顶部。我不想改变html结构来做到这一点。

工作示例如下:



2




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的东西。因此,您也可以添加该规则。