wrap from end Bulma

Question

I have two columns with the following structure using Bulma (0.7.1):

<section class="section">
  <div class="columns">
    <div class="column">
        <!-- column 1 -->
    </div>
    <div class="column">
        <!-- column 2 -->
    </div>
  </div>
</section>

When a user visit my website using a tablet or a mobile, I want my second column to wrap first, i.e. over the first column.

Is there a built-in class in Bulma that does that ? Or do I have to write my own CSS ? If so, how ?

Answer 1

Okay I figured it out with CSS/Bulma, you can add a custom-columns and use column-reverse to change the column's order.

@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>