Make an ordered bootstrap column a float at the top of the screen

Question

I have a difficult little problem that I can’t wrap my head in.

See http://jsfiddle.net/KKczd/ for reference.

Scenario: I have two ordered columns: on large screens they sit next to each other, on smaller screens, one on the right is directed above the left column.

<div class="row">
    <h1>Header section</h1>
</div>
<div class="row">
    <div class="col-md-3 col-md-push-9" id="right">...</div>
    <div class="col-md-9 col-md-pull-3" id="left">...</div>
</div>

This basic layout and functionality works great.

Purpose: For large screens, when the page scrolls down, I want the right column to always stay at the top of the page. For smaller screens, I want the right column (now the first row) to stay on top with the content scroll below it when the content scrolls up.

: javascript, , - - .

, - css, . , , .

?

Answer 1

:

{1} [ , , , ].

{2} [ , ( ) .]

bootstrap - {1} = '' ,

{2}, : class= 'navbar-default navbar-fixed-top visible-xs visible-sm hidden-lg hidden-md ' : =' visible-lg visible-md hidden-sm hidden-xs '. , .

, , .