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

Question

I've a situation where I am bit afraid that solution is not available because as per my understanding we can't split floated column contents or floated column's inner two sections and give them totally different positions when its on Mobile or tablet. I believe position:absolute; is not a good option in order to maintain responsiveness and dynamic content of the web page?

Please note: My client want this responsive all the way from Desktop to Mobile or vice versa.

I've created this wireframe please help me how to handle this situation?

I will appreciate every single reply/feedback on this question!

This would be the possible code for left column and right column & its nested "DIVs" sections which I want to use for both Mobile and Desktop + Tablet as well:

.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

I changed your html for something like this :

<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>

I suppose you'll use media queries in order to display special layout for tablets and mobiles, I simulate this adding "mobile" class on resize() event :

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