Question

When screen resolution is >1000px I have A, B, and C as 280, 350, and 210px respectively)

When it shrinks, I would like it to be B max width followed by A and C clustered together in a div and shrunk. I’m not sure I can do this with straight CSS as the elements are out of order – or am I wrong here? Thanks!

Answer 1

you could do like this with CSS3. But this rely on rowA being on absolute position once page width is less than 1000px. There are other workaround to change the margin-top of it with js dynamically so that col A will hold it position regardless content height changed.

    .body{ margin:0;padding:0;
}
#rowA {
    width:25%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: blue;
}
#rowB {
    width:50%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: red;
}
#rowC {
    //border:1px solid #000;
    width:25%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: blue;
}
#colA, #colB, #colC {

    min-height:330px;
    margin:5px;padding:0;
    background-color: green;
    text-align:center;
}

@media (max-width: 1000px) {
    #rowB {
        width:100%;
        clear:left;
    }
    #rowA {
        width:50%;
        position:absolute;
        margin-top:340px;
    }
    #rowC {
        width:50%;
        clear:left;
        float:right;
    }

}

In body tags.

    <div class="grid">
<span id="rowA"><div id="colA">col A</div></span><span id="rowB"><div id="colB">col B</div></span><span id="rowC"><div id="colC">col C</div></span>