Using a responsive grid system, keep two columns on the same row while allowing more columns for larger screens

Issue

Here a simple snippet written with Chota:

.card {
  margin: 30px;
}

.tag {
  margin-left: .5em;
}

.field {
  border-radius: 5px;
}

<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link rel="icon" href="./favicon.ico" type="image/x-icon">

<div class="row is-center">
  <div class="col-12 col-6-md col-4-lg">
    <div class="card">
      <header class="is-center">
        <h4>Controllo remoto stufa</h4>
      </header>
      <p class="is-center">La stufa è<span class="tag">SPENTA</span></p>
      <div class="is-center">
        <button class="button error">ON/OFF</button>
      </div>
      <hr>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/thermometer.svg?size=24">Temperatura
        </div>
        <div class="col-6 is-center">
          <span class="tag field">22 °C</span>
        </div>
      </div>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/water-outline.svg?size=24">Umidità
        </div>
        <div class="col-6 is-center">
          <span class="tag field">50% RH</span>
        </div>
      </div>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/calendar-month.svg?size=24">Data<span class="tag field">25/12/2023</span>
        </div>
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/clock-outline.svg?size=24">Ora<span class="tag field">12:00</span>
        </div>
      </div>
    </div>
  </div>
</div>

Here how it appears in large screens:

and in smaller screens:

I want, even in smaller screens to keep on the same line the lables (i.e. "Temperatura") and their values. Since the width of the grid system is 12 and the docs says:

All columns are 100% for device width < 600px

I thought that adding two columns with class col-6 should lead to have a single row with two columns even for smaller devices.

Obviously I'm wrong. How should I change my grid?

As a bonus... I would like to allow on larger screens to have a couple of fields (in the example like date and time) while on middle/smaller screens it should fall back to have only one field for row.

Is there a simple way to achieve this?

Solution

New library, but it basically flex layout, so either you look up a class with property flex-wrap: nowrap of just create a new one like my demo below (.mobile-no-wrap) and add it to where you need it.

As a bonus... I would like to allow on larger screens to have a couple of fields (in the example like date and time) while on middle/smaller screens it should fall back to have only one field for row.

Basically just another case of flex-wrap: nowrap, add it to the parent div to make the childs inside on the same line, then break it when in smaller screen size using media query and reverse the flex-wrap property from nowrap to wrap.

.card {
  margin: 30px;
}

.tag {
  margin-left: .5em;
}

.field {
  border-radius: 5px;
}

.row.mobile-no-wrap {
  flex-wrap: nowrap;
}

<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link rel="icon" href="./favicon.ico" type="image/x-icon">

<div class="row is-center">
  <div class="col-12 col-6-md col-4-lg">
    <div class="card">
      <header class="is-center">
        <h4>Controllo remoto stufa</h4>
      </header>
      <p class="is-center">La stufa è<span class="tag">SPENTA</span></p>
      <div class="is-center">
        <button class="button error">ON/OFF</button>
      </div>
      <hr>
      <div class="row mobile-no-wrap">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/thermometer.svg?size=24">Temperatura
        </div>
        <div class="col-6 is-center">
          <span class="tag field">22 °C</span>
        </div>
      </div>
      <div class="row mobile-no-wrap">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/water-outline.svg?size=24">Umidità
        </div>
        <div class="col-6 is-center">
          <span class="tag field">50% RH</span>
        </div>
      </div>
      <div class="row">
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/calendar-month.svg?size=24">Data<span class="tag field">25/12/2023</span>
        </div>
        <div class="col-6 is-center">
          <img src="https://icongr.am/material/clock-outline.svg?size=24">Ora<span class="tag field">12:00</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answered By - Eezo