通过拉动和推动来交换div

Question

我一直在阅读很多文档，但我无法重新安排一些div命令。这是我的代码

<div class="container">

    <div class="row">
        <div class="col-md-11">
            <div class="slider">
                The slider
            </div>
        </div>
        <div class="col-md-5">
            <nav class="main-menu">
                The Menu
            </nav>
        </div>
    </div>

</div>

当屏幕输入sm时，我希望菜单位于滑块上（均为16列大小）。有可能吗？

Answer 1

使用flexbox：

.row {
  display: flex;
  flex-direction: column;
}

@media (max-width: 500px) {
  .row > div:first-child {
    order: 2;
  }
}

http://codepen.io/antibland/pen/aNRZRJ