Menu
I'm using a 2-column fluid layout in Twitter Bootstrap. The left column is the main content (span10), and the right column is a sidebar for widgets (span2). Currently, when resizing the browser window, Bootstrap responds by creating one column with the leftmost section on top, and the rightmost on bottom. I'd like it the other way around.
This is the gist of my html:
<body> <div id="content" class="container-fluid"> <div id="content-row-1" class="row-fluid"> <div id="mainContainer" class="span10"> Lots of content goes here </div> <div id="sidebar" class="span2"> Widgets </div> </div> <!-- content-row-1 --> </div> <!-- content --> </body> Is there any way to have mainContainer on the left and widgets on the right in a wide window, but snap sidebar to the top when the window shrinks?
398
Offset classes Move columns to the right using . offset-md-* classes.
To horizontally align columns, we can use the justify-content classes. justify-content-start left align the columns. justify-content-center center aligns the columns. justify-content-end right align the columns.
To move columns to the right, use the . col-*-offset-* class in Bootstrap.
In bootstrap 3 this is done with grid column ordering (see bootstrap 3 documentation)
Example
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> This will show the upper div behind the lower div if there is enough space. If the screen size is reduced the upper div will stay up.
79
Responded to a question much like this one today, you can see it here, what it basically came down to was shifting the flow of the sidebar by floating it to the right and compensating for the left margin of the content area and then resetting the float attribute of the sidebar with a @media query to accommodate the sidebar once again with its default value from the bootstrap stylesheet.
CSS
body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } #sidebar { float:right; } #content { margin-left: 0; } @media (max-width: 767px) { #sidebar { float:none; } } Here is a reworked demo from the previous question: fiddle, edit here.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
