Bootstrap 3.3.2 fixed width column on large screen but stacks on small screen?

Question

How to make a column in Bootstrap 3.3.2 to be fixed width on large screen (min-width: 768px) but also stacks on small screen (max-width: 767px)?

Did some research and found this solution works half the puzzle, but how to further make it stacks on small screen like a responsive column is doing?

Thus far I tried:

@media (max-width: 767px) {
    .col-fixed-160 {
        width:100%;
    }
    .col-fixed-240 {
        width:100%;
    }
}

But it doesn't work.

Answer 1

you need to use the classes that bootstrap includes, something like

<div class="container">
    <div class="col-lg-8 col-md-12">
    </div>
    <div class="col-lg-4 col-md-12">
    </div>
</div>