Bootstrap 4 如何在django上使用bootstrap使jinja2模板根据屏幕大小变化？

Django 3.0，jinja2引导程序4

我有一个有6列的表格。这张桌子在网站上看起来很棒，但在手机上看起来绝对糟糕。我使用引导进行行和列处理。我不希望用户必须在移动设备上左右滚动。那么我如何使用jinja2模板来实现这一点呢？我对结果持开放态度。我猜它看起来会像

电流输出

Computer:
1,2,3,4,5,6
x,x,x,x,x,x
y,y,y,y,y,y

期望输出

col-sm-? device
1,2,3
x,x,x
x,x,x
y,y,y
y,y,y

下面是该表的代码

 <div class='container'>
        <table class="table document-list">
            <thead>
            <tr>
                <div class='row'>
                    <div class='col-12 col-md-6'>
                        <th>#</th>
                        <th>File</th>
                        <th>Description</th>
                    </div>
                    <div class='col-12 col-md-6'>
                        <th>a</th>
                        <th>b</th>
                        <th>c</th>                        
                    </div>
                </div>
            </tr>
            </thead>
            <tbody class='document-body'>
                {% for instance in object_list %}
                        <tr class='contract-product'>
                            <div class='col-12 col-md-6'>
                                <th scope="row">{{ forloop.counter }}</th>
                                <td>{{ instance.filename }}</td>
                                <td>{{ instance.description }}</td>
                            </div>
                            <div class='col-12 col-md-6'>
                                <td><a href="{{ instance.get_download }}" class="btn btn-primary">Download</a></td>
                                <td><a href="{{ instance.get_download }}?preview=True" class="btn btn-primary">Preview</a></td>
                                <td><a href="{{ instance.get_download }}" class="btn btn-secondary">Remove</a></td>
                            </div>
                        </tr>
                {% endfor %}

            </tbody>
        </table>
    </div>
</div>

#
文件
描述
A.
B
C
{%例如在对象\列表%}
{{forloop.counter}}
{{instance.filename}
{{instance.description}}
{%endfor%}