html - 用拉和推交换 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 时，我希望菜单位于 slider 上方(均为 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