Bulma: How can I define the stack order on mobile devices

烈酒焚心 提交于 2019-12-04 15:14:40
Angela

For this answer, I'm assuming you want BAR to display first ONLY on mobile screens. And for larger display screens you want FOO to be displayed to the left-most side.

One way to do this is to take advantage of flexbox which is what bulma is built off of. On larger screens, bulma gives columns the property display:flex which can be used to display contents in rows and columns.

However on smaller screens the display property switches to block. In most cases, when consecutive items have display:block, they're going to stack in order.

We can make use of this using a funky workaround. Place BAR first in your html. Then add a class to columns and style it like so: HTML:

<div class="columns reverse-row-order">
  <div class="column bar">Bar</div>
  <div class="column foo">Foo</div>
</div>

CSS:

.reverse-row-order{
 flex-direction:row-reverse;
}

And here is a jsFiddle if you want to see it working: https://jsfiddle.net/99ydhod8/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!