Q:

Bootstrap change structure for responsive view

i have the following in web view
http://shahnashok.com/stackoverflow/b-webView.png
And i want the following structure in responsive view
http://shahnashok.com/stackoverflow/b-responsiveView.png
how do i acheive this in both view with a single structure,
<div class="left">
    <div class="row">1</div>
    <div class="row">2</div>
    <div class="row">3</div>
</div>
<div class="right">
    <div class="row">4</div>
</div>

CSS
.left{
    width: 30%;
    float: left;
}
.right{
    width: 70%;
    float: right;
}

@media (min-width: 720px)
{
    .left, .right{width: auto; float: none;}
}

A:

Bootstrap alone won't be able to give you that perfect alignment. Your CSS looks good, but you will need to update your HTML. You can view a fiddle here: http://jsfiddle.net/m0nk3y/384upoer/1/. This is how I organized the HTML:
<div class="container">
    <div class="row">
        <div class="blue col-xs-4"></div>
        <div class="green col-xs-8"></div>
        <div class="yellow col-xs-4"></div>
        <div class="red col-xs-4"></div>
    </div>
</div>

I hope that helps somehow. Good luck!

