CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Alan
Alan

Reputation: 1198

Bootstrap 3: Column push after pull

I'm using Bootstrap 3 and am trying to lay out columns like so:

On small screens:

enter image description here

On larger screens:

enter image description here

What I have so far:

enter image description here

The code I'm using is:

<div class="container">
   <div class="row">

    <div class="col-sm-5 col-sm-push-7">
      Sidebar top
    </div>

    <div class="col-sm-7 col-sm-pull-5">
      Main content
    </div>

    <!-- I also tried removing the push-7 below with no luck -->
    <div class="col-sm-5 col-sm-push-7"> 
      Sidebar bottom
    </div>                          

  </div>
</div>

I am a bit confused because Bootstrap uses float:left internally for columns so in the large case I would expect the pushed "sidebar bottom" to float up against the left side of the pulled "main content" since there's room for it. That isn't happening though.

Has anyone solved something similar? Thanks!

Code on Bootply: http://www.bootply.com/YscbG7cX0G

Upvotes: 0

Views: 122

Answers (1)

Niket Thapa
Niket Thapa

Reputation: 305

Please try this one HTML structure

    <div class="row">

    <div class="col col-sm-5 pull-right" style="background-color:#3B8686;height:50px;">
        Sidebar top
    </div>

    <div class="col col-sm-7" style="background-color:#0B486B;height:100px;">
        Main content
    </div>

    <div class="col col-sm-5" style="background-color:#A8DBA8;height:50px;">
        Sidebar bottom
    </div>

</div>

Thank You.

Upvotes: 1

Related Questions