Css 引导4 jumbotron列的排序-顺序xs-不工作

我有一个bootstrap 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>

欢迎
这是我的网站

这应该是小屏幕上的第一列

请阅读引导4中不再使用

-xs

中缀

<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>

欢迎
这是我的网站

这应该是小屏幕上的第一列