Bootstrap 4 - Stack 2 столбца с 1 большим столбцом справа

Question

Я пытаюсь использовать bootstrap 4 и, возможно, flexbox для достижения следующего:

Маленький экран:

|                 |            |
|        1        |      2     |
|                 |            |
|______________________________|
|                              |
|                              |
|               3              |
|                              |

Большой экран:

|                 |            |
|        1        |            |
|                 |            |
|_________________|      2     |
|                 |            |
|                 |            |
|        3        |            |
|                 |            |

Что у меня есть: https://jsfiddle.net/aq9Laaew/180926/
Я пытался поиграться с order- * и align-self-stretch, но они не дают желаемого результата. (Я ищу что-то вроде rowspan)

Дополнительные детали, которые могут быть важны:
Высота столбца 2 составляет 68 пикселей на маленьких экранах и 140 пикселей на больших экранах (точка останова для больших - 992 пикселей и выше)

Answer 1

Я ответил на похожие вопросы здесь:
Как исправить неожиданный порядок столбцов в начальной загрузке 4?
Один высокий div рядом с двумя более короткими div на рабочем столе и сложенный на мобильном с Bootstrap 4

Вам нужно переопределить flexbox в строке, чтобы заставить более высокий столбец плавать правильно. Это можно сделать, используя d-md-block в строке и float- * в столбцах.

<div class="container">
  <div class="row d-md-block">
    <div class="col-9 border float-left">
      1 of 3
    </div>
    <div class="col-3 border taller float-right">
      2 of 3
    </div>
    <div class="col-12 col-md-9 border">
      3 of 3
    </div>
  </div>
</div>

https://www.codeply.com/go/yYtp645znZ