Bulma CSS columns reversed on mobile

I have a line around which I want Bulma CSS columns to act as "leaves" on a "tree".
I am achieving this with <div> elements from top to bottom, with two columns each so they take up the left and right side of the screen. Text is then left/right aligned.
The top 4 buttons should be on the right side, the bottom 4 on the left.

Here is a graphic of what I mean:
Working on Desktop

However, when the screen width gets too small i.e. mobile browser, the columns break and it seems text alignment is reversed:
Broken on mobile

My format is essentially:

//div structure for a top right "leaf"

<div class="columns">
    <div class="column"></div> //empty left side column
    <div class="column">
        <button class="button"> Hello </button>
    </div>
</div>

//empty column divs in the middle section for spacing
...

//div structure for a bottom left "leaf"
<div class="columns">
    <div class="column has-text-right">
        <button class="button">Hello</button>
    </div>
        <div class="column"></div> //empty right side column
</div>

Any idea why this is breaking?

In case it's helpful, here's a screenshot of my very repetitive CSS structure for this tree. Tree divs

Solution

This is because by default columns in Bulma aren‘t activated on mobile (which is up to 768px, the different sizes in Bulma are visible in the documentation), so they are stacked on top of each other.

The solution is to add the is-mobile class to your columns containers so your example looks like this:

//div structure for a top right "leaf"

<div class="columns is-mobile">  // is-mobile class added
    <div class="column"></div> //empty left side column
    <div class="column">
        <button class="button"> Hello </button>
    </div>
</div>

//empty column divs in the middle section for spacing
...

//div structure for a bottom left "leaf"
<div class="columns is-mobile">  // is-mobile class added
    <div class="column has-text-right">
        <button class="button">Hello</button>
    </div>
        <div class="column"></div> //empty right side column
</div>

You can check this part of the documentation for more details about mobile columns.