уровень бульмы внутри коробки переполнен

У меня возникли проблемы с попыткой создать адаптивную сетку из 3 блоков с некоторым выровненным содержимым внутри с использованием библиотеки Bulma. Я хотел бы, чтобы он работал, сохраняя уровень внутри коробки, если это возможно.

Любая помощь будет оценена по достоинству.

Это результат, который я ожидаю:

Но при уменьшении ширины ломается:

Это код, который я использую:

<div className="columns sub">
          {this.props.options.map(option => (
            <div className="column is-one-third" key={option.id}>
              <div
                name={option.id}
                className={
                  `box ` +
                  (this.props.optionToBeChosen === option.id
                    ? "box-is-active"
                    : "")
                }
                onClick={() => this.props.onClick(option.id)}
              >
                <div className="level is-mobile">
                  <div className="level-item level-left">
                    <div>
                      <p className="box-text-title">{option.title}</p>
                      <p className="box-text-small">{option.description}</p>
                      <p className="box-text-small">{option.description2}</p>
                    </div>
                  </div>

                  <div className="level-item level-right has-text-right">
                    <div>
                      <p className="box-text-demo">{option.cta}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>