CODEWITHSUNDEEP
csstwitter-bootstrapmultiple-columns
Anil Astrio
Anil Astrio

Reputation: 103

How to collapse a Bootstrap column?

How can I collapse my sidebar in between 2 sections like in the following image?

image

Upvotes: 2

Views: 1625

Answers (1)

What have you tried
What have you tried

Reputation: 11148

This example actually works outside of the js fiddle environment. The problem is the @media query doesn't take effect in this environment so the float messes up.

http://jsfiddle.net/v38q68h2/12/

<div class="col-md-8" id="a">
    A
</div>
<div class="col-md-4 pull-right" id="b">
   B
</div>
<div class="col-md-8" id="c">
    C
</div>

#a{
    background: black;
    padding: 10px;
}
#b{
    background: blue;
    padding: 10px;
}
#c{
    background: red;
    padding: 10px;
}

You could definitely make some optimizations, but just having the sidebar wrapper come before the bottom section seems to have it fall into place correctly. The only real downside is that you'd have to build your sidebar into the main content.

Upvotes: 2

Related Questions