html - 如何将右栏(桌面)分成两部分，一个显示在手机顶部，另一个显示在底部？

Question

我有点担心解决方案不可用，因为根据我的理解，我们无法拆分 float 列内容或 float 列的内部两个部分，并在移动设备或平板电脑上为它们提供完全不同的位置。我认为 position:absolute; 不是保持网页的响应性和动态内容的好选择？

请注意:我的客户希望这种响应从桌面到移动，反之亦然。

我已经创建了这个线框请帮我处理这种情况？

我将感谢关于这个问题的每一个回复/反馈!

这将是左列和右列及其嵌套的“DIV”部分的可能代码，我也想将其用于移动设备和台式机 + 平板电脑:

.content { background:#dddddd; }
.left-column { float:left; width:60%; background:#5ba5f1; padding:20px; box-sizing:border-box; min-height:600px; }
.right-column { float:right; width: 35%; background:#6fc561; padding:20px; box-sizing:border-box; }
.section1 { background:#e7e265; margin-bottom:20px; border:1px solid #000; min-height:200px; }
.section2 { background:#e7e265; margin-bottom:20px; border:1px solid #000; min-height:200px; }

<div class="content">
    <div class="left-column">Lorem ipsum dolor sit amet, consectetur.....</div>
    <div class="right-column">
    <div class="section1">Section 1 of right column</div>
    <div class="section2">Section 2 of right column</div>
    </div>
    </div>

Answer 1

我把你的 html 改成了这样:

<div class="content">
    <div class="right-column">
        <div class="section1">Section 1 of right column</div>
    </div>
    <div class="left-column">Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur.</div>
    <div class="right-column">
        <div class="section2">Section 2 of right column</div>
    </div>

</div>

我想你会使用媒体查询来显示平板电脑和手机的特殊布局，我模拟了在 resize() 事件上添加“移动”类:

CSS

.content {
    background:#dddddd;
}
.left-column {
    float:left;
    width:60%;
    background:#5ba5f1;
    padding:20px;
    box-sizing:border-box;
    min-height:600px;
}
.right-column {
    float:right;
    width: 35%;
    background:#6fc561;
    padding:20px;
    box-sizing:border-box;
}
.section1 {
    background:#e7e265;
    margin-bottom:20px;
    border:1px solid #000;
    min-height:200px;
}
.section2 {
    background:#e7e265;
    margin-bottom:20px;
    border:1px solid #000;
    min-height:200px;
}

/*/////////////////////////*/
/* Mobile settings*/
/*/////////////////////////*/


.mobile .left-column {
    width:100%;
    background:#ccc;
    min-height:inherit;
}
.mobile .right-column {
    width: 100%;
    background:#ccc;
}

JS

$( window ).resize(function() {
    $(".content").addClass("mobile")
});

Working exemple