How to make a fixed column in a responsive grid?

Question

Using Bootstrap, is it possible to keep a grid column fixed for certain breakpoints? And for the same column to stack and flow with the page for other breakpoints?

In the sample below, for large screens, I want the content in the right column to scroll as the left column stays fixed. For small screens, the left column should stack over the right and the page should scroll as normal.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      I want this to always be visible as the right side scrolls.
    </div>
    <div class="col">
    ...
    </div>
  </div>
</div>

CodePen sample

Possible duplicate of [How to left column fixed and right scrollable in Bootstrap 4, responsive?](http://stackoverflow.com/questions/44086159/how-to-left-column-fixed-and-right-scrollable-in-bootstrap-4-responsive) — Carol Skelly, May 22 '17 at 11:50
Yes, thank you @ZimSystem! I have provided an answer here without the extra bloat from the question you referenced. — myartsev, May 22 '17 at 15:25

score 4 · Answer 1 · edited Jan 06 '18 at 00:16

Offset the column that is not fixed:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      I want this to always be visible as the right side scrolls.
    </div>
    <div class="col offset-lg-2">
    ...
    </div>
  </div>
</div>

And apply a media query to fix the other column for the relevant breakpoints:

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options https://getbootstrap.com/docs/4.0/layout/grid/#mixins

@include media-breakpoint-up('lg') {
    #left {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

Codepen sample

How to make a fixed column in a responsive grid?

1 Answers1