bulma have 2 rows with 2 columns on desktop but have 4 rows with 1 column

Question

Is there an more elegant way to achieve this using bulma:

Desktop (https://jsfiddle.net/AlexZeitler/2odamk03/)

<div class="container">
  <div class="columns">
    <div class="column">
      <span>adress</span>
    </div>
   <div class="column">
      <span>city</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>phone</span>
    </div>
    <div class="column">
      <span>email</span>
    </div>
  </div>
</div>

Tablet should look like this (https://jsfiddle.net/AlexZeitler/yuhxr13b/):

<div class="container">
  <div class="columns">
    <div class="column">
      <span>adress</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>city</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>phone</span>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <span>email</span>
    </div>
  </div>
</div>

.container has a fixed width dependending on tablet or desktop mode:

.container {
  padding: 2em;
  width: 400px;
  border: 1px solid red
}

Answer 1

I use tiles when I do something similar.
Not shorter, but you don't have to worry about .columns

https://jsfiddle.net/0c38ejqa/