Collapse div/element on mobile screens only with bootstrap. Example pic

Question

Is it possible to collapse a sidebar div - only on mobiles - using bootstrap? How would I go about doing something like the example in the image? So that on a mobiles the sidebar collapses and when clicked, expands. I don't understand how media queries would allow me to do this becuase of the jquery involved.

http://i46.tinypic.com/2mzxflu.jpg

Have seen some similar questions on here but nothing exactly like this. Could someone explain or at least point me in the right direction? Thanks in advance.

Answer 1

I ended up stumbling across this issue and added a CSS class for it:

.collapse-non-md {
    height: 0;
    display: none;
}
.collapse-non-md.collapsing {
    display: block;
}

@media (min-width: 992px) {
    .collapse-non-md {
        height: auto;
        display: block;
    }
}

Then I set the class of the element I wanted collapsed on screens below medium to collapse-non-md and voila, it's collapsed on small browsers and open on medium ones. It can still be opened and closed the normal way (the .in class overrides .collapse-non-md).