当前位置:  开发笔记 > 前端 > 正文

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

如何解决《布尔玛:更改列的堆栈顺序》经验,为你挑选了1个好方法。

如何在移动设备或平板电脑上更改列的堆栈顺序?

例如,它在宽屏幕上是水平的,但是当它缩小时我想要2在顶部.我不想改变html结构来做到这一点.

工作实例如下:


1
2



1> Mohammad Usm..:

根据当前的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
推荐阅读
360691894_8a5c48
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有