Есть ли способ заставить порядок табуляции соблюдать визуальный порядок?

Допустим, у меня есть веб-страница, содержащая список ссылок.

<ul class="links">
    <li><a href="#">Alpha</a></li>
    <li><a href="#">Bravo</a></li>
    <li><a href="#">Charlie</a></li>
</ul>

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

@media (min-width: 30em) {

    .links {
        display: flex;
        flex-direction: column;
    }

    .links > li:first-child {
        order: 1;
    }

}

При переходе по различным элементам на странице, на которые можно сфокусироваться, визуальный порядок этих ссылок не соблюдается, поэтому при переходе по списку порядок фокуса будет «Альфа», затем «Браво», затем «Чарли».

Если я устанавливаю положительный tabindex для любой из этих ссылок, они перемещаются в конец порядка табуляции (поскольку все остальные фокусируемые элементы по существу имеют индекс табуляции 0).

У меня вопрос: есть ли способ сделать так, чтобы порядок табуляции соответствовал визуальному порядку?.