如何将右栏（桌面）分成两部分，一个显示在手机顶部，另一个显示在底部？

Question

我有一种情况，我有点担心解决方案不可用，因为根据我的理解，我们不能拆分浮动列内容或浮动列的内部两个部分，并在移动或药片。我认为 position:absolute; 不是保持网页响应速度和动态内容的好选择？

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

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

关于这个问题的每一个reply/feedback我都会感谢！

这可能是左栏和右栏及其嵌套 "DIVs" 部分的可能代码，我也想将其用于移动设备和台式机 + 平板电脑：

.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() 事件上添加 "mobile" class :

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

如何将右栏（桌面）分成两部分，一个显示在手机顶部，另一个显示在底部？

How to split right column (desktop) into two parts and show one on top of mobile and the other at the bottom?

html

css

mobile

responsive-design

responsiveness