columns jumping with bootstrap affix

Question

I have two bootstrap columns that sit next to each other on large screens, and stack on top of each other on small screens. It is intentionally setup so the column on the right stacks on top of the left column on smaller screen.

Problem: When scrolling on large screens, the column affixes properly in the y-axis, but both the left and right columns jump out to the sides and change width.

Check out the js fiddle, scroll down and you'll see the problem. http://jsfiddle.net/KKczd/1/

HTML

<div class="col-md-3 col-md-push-9" id="right">
    Right in wide screens, top on small screens
</div>
<div class="col-md-9 col-md-pull-3" id="left">
    Left column with a lot of stuff
</div>

JS

$('#right').affix();

I assume I can fix this with css, but none of my efforts have solved it. Appreciate any suggestions.

score 0 · Answer 1 · edited May 23 '17 at 11:49

This is not a complete answer, but if you make the following change, you'll see a difference:

<div class="col-md-3 col-md-push-9">
    <div id="right">
        Right in wide screens, top on small screens
    </div>
</div>

The affix changes still width, because it has a fixed position. See here and here for further details.

Then there are some ugly padding differences left: on a narrow page, where the blocks are stacked, the top one has a smaller width than the bottom one. This is probably easy to fix.

columns jumping with bootstrap affix

1 Answers1