Css 如果在小型设备中，请更改列顺序

我有一行有两列，每列使用

col-md-6 col-sm-12

，因此如果在小型设备中，每列将使用整个宽度并强制换行。但是，当在小屏幕中查看时，我需要更改这些列的顺序（第一列必须显示在第二列之后）

我尝试使用以下代码，但是第一列的位置甚至在桌面上也发生了变化

<div id="panel-details" class="row">
    <div class="col-md-6 col-sm-12 col-sm-push-12">
        <ul class="video-details">
            <li class="video-title">
                Title
            </li>
            <li class="video-author">
                Name
            </li>
            <li class="video-description">
                Description
            </li>
        </ul>
    </div>
    <div class="col-md-6 col-sm-12 col-sm-pull-12">
        &nbsp;
    </div>
</div>

标题


名称


描述

您需要将第二列放置在第一列之前，以便它在较小的视口中按该顺序显示，然后，一旦完成

768px

操作，第二列将向右移动，第一列在左侧。此外，您需要将推/拉类应用于col-md-6，而不是col-sm-6。手机优先

看

工作示例：

第二


前1


前2名


前三名

我想更好的解决方案是使用flexbox。你可以看看例子，这就是float的用途。