小编vsa*_*nth的帖子

我有两个要并排显示的表格。当第一个表格的宽度很大（但仍然小到可以并排放置）时，第二个表格显示在其下方。

有没有办法并排显示它们，并且只有在屏幕宽度太小时才下拉？

这是我的代码：

<div class="container">
<div class="row">
    <div class="col-sm">
    <h3>Students</h3>
    <div class="row">
        <a href="/newstudent" class="button-sm">New</a>
    </div>
    <table>
        <tr>
            <td>Username</td>
            <td>First name</td>
            <td>Surname</td>
        </tr>


        <tr>
            <td><a href="/editstudent/lilyliam">lilyliam</a></td>
            <td>Lily</td>
            <td>Liam</td>
        </tr>

        <tr>
            <td><a href="/editstudent/gracenoah">gracenoah</a></td>
            <td>Grace</td>
            <td>Noah</td>
        </tr>

        <tr>
            <td><a href="/editstudent/avawilliam">avawilliam</a></td>
            <td>Ava</td>
            <td>William</td>
        </tr>

        <tr>
            <td><a href="/editstudent/avawilliam">avawilliam</a></td>
            <td>Ava</td>
            <td>Williamsssssssssssssssssss</td>
        </tr>

    </table>
    </div>
    <div class="col-sm">
    <h3>Teachers</h3>
    <div class="row">
        <a href="/newteacher" class="button-sm">New</a>
    </div>
    <table>
        <tr>
            <td>Username</td>
            <td>First name</td>
            <td>Surname</td>
            <td>Type</td>
        </tr>

        <tr>
            <td><a href="/editteacher/johnsmith">johnsmith</a></td>
            <td>John</td>
            <td>Smith</td>
            <td>ADMIN</td>
        </tr>

        <tr>
            <td><a href="/editteacher/williamjoseph">williamjoseph</a></td>
            <td>William</td>
            <td>Joseph</td>
            <td>teacher</td>
        </tr> …