Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

bootstrap layout markup for right sidebar

Bootstrap Layout Markup For Right Sidebar

bootstrap layout markup for right sidebar

Problem

This is what I want to achieve : http://i.imgur.com/n91OYWN.png

How can I construct the above layout using bootstrap? The left part (2 col) and the right has 1 col, I color them so you can see.

The problem is this is not a static site. So here's the take for the markup

white
white
white
white
orange

the orange and the white will mix up in mobile and above markup is hard to maintain because I have to loop using php to display the content for the white box.

Problem courtesy of: user3522897

Solution

This is very easy to do with the push and pull classes that come with bootstrap 3.

DEMO: http://jsbin.com/riniri/1/

This will have orange on top on small viewports (under the col-lg- class) and will be on the right when it's at that min-width or larger.

  

DEMO CSS ONLY:

.box {width:100%;height:300px;margin-bottom:30px;border:5px solid #000}
.orange {background:orange}
Solution courtesy of: Christina

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

bootstrap layout markup for right sidebar

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×