Bootstrap 4 упорядочение столбцов jumbotron - order-xs- не работает

Question

У меня есть загрузчик 4 jumbotron с двумя столбцами, как это, и я хочу, чтобы второй столбец появился первым на маленьких экранах. Это мой код Но это не работает. Что я делаю не так

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-xs-2">
                <h1>Welcome</h1>
                <p class="lead">This is my site</p>
                <p><a class="btn btn-primary btn-lg" href="{% url 'login' %}" role="button">Login &raquo;</a></p>
            </div>
            <div class="col-md-4 order-xs-1">
                This should be the first column on small screens
            </div>
         </div>
    </div>
</div>

Answer 1

Прочитайте раздел миграции в документации . Инфикс -xs больше не используется в Bootstrap 4

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-2 order-md-1">
                <h1>Welcome</h1>
                <p class="lead">This is my site</p>
                <p><a class="btn btn-primary btn-lg" href="{% url 'login' %}" role="button">Login &raquo;</a></p>
            </div>
            <div class="col-md-4 order-1">
                This should be the first column on small screens
            </div>
         </div>
    </div>
</div>

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