Bootstrap collapsing sidebar not hiding to the side -

i've got issue bootstrap code. i'm trying make sidebar come in right side on mobile device, pretty here: http://getbootstrap.com/examples/offcanvas/ can't seem work. i'm trying make chevron icon change between left , right facing arrows, not work though i've gotten work before left sidebar. project located here, appreciated piston.serverpit.com/bootstrap/main

edit: i've managed button , action working right, problem seems sidebar places under content of page instead of side of it. how fix this?

fiddle: http://jsfiddle.net/zaulh39y/ 

edit2: got working example starting scratch offcanvas example, when try put article code body still breaks... ideas? seems main problem setting minimum width of sidebar in css. http://jsfiddle.net/xyd6ttbe/

according external example, update this

#sidebar{    position: absolute;    /* no float, no left or right */ } .row-offcanvas-right {    left: 100%; /*instead of right xx...*/ } .row-offcanvas-right.active {    left: 50%;  /*instead of right xx...*/ } 

you may need update css wide screen mode, too.

by way: if provide working demo in jsfiddle, codepen or stackoverflow, easier you.