Fun with Bulma css columns

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<div class="columns is-mobile is-multiline">
  <div class="column is-three-quarters-mobile is-two-thirds-tablet is-two-fifths-widescreen">
    <div class="p-1">
       <h2>
         Section 1
       </h2>
    </div>
  </div>

  <div class="column is-half-mobile is-one-fifth-widescreen">
    <div class="p-1">
       <h2>
         Section 2
       </h2>
    </div>
  </div>

  <div class="column is-half-mobile is-one-fifth-widescreen">
    <div class="p-1">
       <h2>
         Section 3
       </h2>
    </div>
  </div>

  <div class="column is-one-quarter-mobile is-one-third-tablet is-one-fifth-widescreen">
    <div class="p-1">
       <h2>
         Section 4
       </h2>
    </div>
  </div>

</div>


<br><br><br>


<div class="columns is-mobile is-multiline">
  <div class="column is-three-quarters-mobile is-two-thirds-tablet is-two-fifths-widescreen">
    <div class="p-1 is-flex">
      <div>
       <h2 class="big">
         999
       </h2>
        <small>Nesting!</small>
      </div>
       <div class="p-1">
         Some data<br>
         Some data<br>
         Some data<br>
       </div>
    </div>
  </div>

  <div class="column is-half-mobile is-one-fifth-widescreen">
    <div class="p-1">
       <h2>
         Section 2
       </h2>
    </div>
  </div>

  <div class="column is-half-mobile is-one-fifth-widescreen">
    <div class="p-1">
       <h2>
         Section 3
       </h2>
    </div>
  </div>

  <div class="column is-one-quarter-mobile is-one-third-tablet is-one-fifth-widescreen">
    <div class="p-1">
       <h2>
         Section 4
       </h2>
    </div>
  </div>

</div>

CSS

.p-1 {
  padding: 1rem;
}

.column:nth-child(1) {
  background: beige
}
.column:nth-child(2) {
  background: aqua
}
.column:nth-child(3) {
  background: tomato
}
.column:nth-child(4) {
  background: lightgray
}

@media screen and (max-width: 1200px) {
  .column:nth-child(2),
  .column:nth-child(3) {
    order: 1
  }
}

.big {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 0;
}