Адаптивность разметки

Пытаюсь сделать небольшой адаптивный интерфейс с помощью Bootstrap 4, но получается с трудом.

Есть страница, в которой две колонки при широком экране и одна при узком. У колонок есть содержимое переменной высоты в зависимости от содержания.

Порядок блоков важен в каждом из разрешений. Если делаю это через колонки, то получаю то, что ниже. А хочется, чтобы блок 3 тоже поднимался.

Если пытаюсь сделать через d-flex, то колонок получается больше двух, а так быть не должно в итоге.

Помогите, пожалуйста, разобраться. Может быть, простыми инструментами это не сделать.