How can I change the stack order of columns on mobile or tablet?
For example, the code below shows elements horizontally on wide screens, but when it's shrinked I want 2
to be on top. I don't want to change the html structure to do it.
The example is below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
As of the current bulma version
v0.3.1
, there is no feature for the changing the order of columns.
However, you can define custom styles to change the order for mobile, tablet or whatever resolution that you want.
You can define a custom class .reverse-columns
for example and add it on parent with following styles:
@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;
}
}
<div class="columns custom-columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
@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;
}
}
You can always add more rules for widescreen etc., but this is what you usually need.
flex-direction: row-reverse;
is what I would use for .columns.is-mobile.is-reversed-mobile
. So you can add that rule too.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With