jquery - 使用 CSS 切换元素位置

Question

我有 2 个 DIV，我一直在尝试重新排序，如下图所示。尝试将日历 移动到快速链接 上方以供移动设备查看，但它似乎不起作用。我尝试将 Calendar float 到左侧，将 Quick links float 到右侧，但仍然无效。关于如何实现这一目标的任何想法？我愿意接受基于 HTML 和 jQuery 的建议。

HTML

<div id="quick-links"></div><!-- End Quick links -->

<div id="calendar"></div><!-- End Calendar -->

CSS 代码

    #calendar {
        float: left;
        position: relative;

         }


    #quick-links {
        float: right;
        position: relative;
}

插图图片

Answer 1

正如@Terry 所指出的，您可以使用 CSS3 Flexbox。

这样你只需要改变顺序。事实上，只需更改一个 div(快速链接)上的 order，它就会自动切换。

像这样:

#container {
    width: 240px; height: 240px;
    border: 1px solid gray;
    display: flex;
    flex-direction: column; 
    /* flex-direction: column-reverse; */
    /* use column-reverse if needed to reverse the entire list */
}

#quicklinks {
    order: 2;
}

#calendar {
    order: 1;
}

.filler {
    height: 100px;
    margin: 8px;
}

#calendar .filler {
    background-color: #f00;
}
#quicklinks .filler {
    background-color: #00f;
}

<div id="container">
    <div id="quicklinks">
        <div class="filler">Quick</div>
    </div>
    <div id="calendar">
        <div class="filler">Calendar</div>
    </div>
</div>

可以玩的 fiddle :http://jsfiddle.net/abhitalks/d8r47k8q/

.