Разрывы столбцов в CSS Flexbox

Question

Какие свойства CSS я должен установить, чтобы столбцы были перенесены с заранее определенными разбиениями и упорядочением столбцов?

Столбцы будут содержать элементы с динамической и переменной высотой (поэтому их высота не может быть указана вCSS).

Желаемый адаптивный макет при различной ширине

Unsuccessful attempt

(I earlier попытался сделать это с помощью компоновки Grid , но это не работает, потому что у меня нет жесткого рядаheights.)

Я сейчас пытаюсь сделать это с display: flex, но в большинстве браузеров это не работает так, как мне хочется.Пример:

header {
    height: 2.0rem;
    background: PeachPuff;
}
footer {
    height: 2.0rem;
    background: PaleGreen;
}

header,
footer,
section.app-column {
    padding: 1.0rem;
}
section.app-column {
    display: inline-block;
    flex: none;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 150px;
    margin-right: 0.5rem;
}

section#main section#app-column-primary {
    background: Cyan;
}
section#main section#app-column-secondary {
    background: Thistle;
}
section#main section#app-column-tertiary {
    background: Coral;
}

section#main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

@media (max-width: 199px) {
    section#main {
        content: "<p>This application requires a wider graphical display.</p>";
    }
    section.app-column {
        display: none;
    }
}

@media (min-width: 200px) and (max-width: 399px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 2; }
    section#app-column-tertiary { order: 3; }
    section.app-column {
        page-break-before: avoid;
        break-before: avoid-column;
    }
}

@media (min-width: 400px) and (max-width: 599px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 3; }
    section#app-column-tertiary { order: 2; }
    section.app-column {
        page-break-before: always;
        break-before: column;
    }
    section#app-column-tertiary {
        page-break-before: avoid;
        break-before: avoid-column;
    }
}

@media (min-width: 600px) {
    section#app-column-primary { order: 1; }
    section#app-column-secondary { order: 2; }
    section#app-column-tertiary { order: 3; }
    section.app-column {
        page-break-before: always;
        break-before: column;
    }
}

<header>Header ipsum, dolor sit amet.</header>
<section id="main">
    <section class="app-column" id="app-column-primary">
        Primary column
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </section>
    <section class="app-column" id="app-column-secondary">
        Secondary column
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Curabitur ac ornare justo. Sed vitae rhoncus nibh. Phasellus
        venenatis, quam eu rutrum porta, velit dolor fermentum elit, eu
        faucibus sapien ipsum in leo.
    </section>
    <section class="app-column" id="app-column-tertiary">
        Tertiary column
        <br />Lorem ipsum dolor sit amet.
    </section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>

Правильный результат в Firefox

Firefox правильно интерпретирует запрошенные свойства break-before.Например, при 2 столбцах:

Webkit и Chrome не могут разбить столбцы

Но браузеры Chrome (и браузеры Webkit) некорректноотказаться от вставки разрыва столбца:

Обратите внимание, что CanIUse говорит мне, что page-break-before должно дай поведение, которое я хочу.Однако этот пример все еще не работает, с page-break-before в нужных местах.

Как получить правильный результат во всех браузерах, которые поддерживают Flexbox?