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

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%;
  }
}

Code (markup):

But it doesn't work. Any idea?

 

Without seeing the markup you are applying that CSS to and/or your layout and code order, it's near impossible to answer -- BUT:

The classes shown above ALONE show precisely why bootcrap is a bunch of mouth-breathing halfwit nonsense. IF you need some dumbass 'framework' using PRESENTATIONAL class names to create your layouts, you probably shouldn't be trying to build layouts in the first place. At BEST bootcrap is a sleazy shortcut, at worst it defeats the entire reason to be using HTML and CSS in the first place and is the antithesis of efficient site building -- in a "separation of presentation from content, what's that?" sort of way.

My advice, find a stick to scrape that bootcrap off with, it's likely making you work harder, not better -- despite the wild nonsensical claims of it doing the exact opposite; just like every other dumbass "framework" nonsense people use to piss all over their websites with.

In case you couldn't tell, not a fan.

 

Thanks you @deathshadow. You are still here! I know you since a few years back on DP.

I forgot to include the link for the part that I said: "Did some research and found this solution works half the puzzle".

The half-way solution I found is this one: http://stackoverflow.com/questions/...includes-fixed-column-sizes/26849081#26849081

On top of the above solution I found, which correctly fixes the width of the columns, I tried to add my own code to further make them stack on smaller screens:

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

Code (markup):

Which didn't work. Is there any way I can achieve this? Both fixed width and also stacks as a single column on smaller screen?

 

try changing them back from position:fixed to position:static... really though if they are in fact "fixed" the layout is rubbish... but that's PRECISELY what they are with that .col-fixed-somewidth idiocy instead of saying what those sections ARE. Presentational classes like that are why I'd throw whatever it is you are working on away and start over WITHOUT bootcrap. That it even encourages the USE of position:fixed in the first place is an example of why it's rubbish you shouldn't be wasting your time on in the first place; much less the halfwit nonsense of declaring the width of content areas in pixels.

Honestly, EVERY answer / post in that stackOverflow thread you linked to only shows how stupid bootcrap and the mentality behind it is.

The 'big' problem though is they are fixed -- which means they don't move; they are removed from flow. You want to put them back in flow, you need to set their positioning as such; either relative or static SHOULD do the job, though you'll have to make sure that left/right/top/bottom aren't being set either.

But again, pixel widths? Fixed positioning of major content areas? If you don't know what's wrong with that, you shouldn't be making layouts -- and why 99.99% of the mouth-breathing dumbass bull made with bootcrap isn't worth a bucket of spit.

Throw out what you have and start over building the site PROPERLY without the lame duck framework, before you paint yourself into the corner.

 

Do you have anything to recommend instead of bootstrap? Any framework you believe would be better?

I used to code CSS when IE6 was still prevalent and it's really a chore. I would include just a reset and start building everything from scratch. A few years went by when I never did anything frontend. Things have changed drastically since then and I feel obsolete with my old way (old knowledge of CSS).

It doesn't seem very productive now and I don't want to start over from scratch any more, so I started familiarizing myself with some CSS frameworks with which I can kick start my project easier and moderner or at least that was what I hoped.

 

Frameworks -- by their very nature -- defeat the entire point of using HTML and CSS in the first place! They provide NO advantages, and are no less work that working without them despite the wild claims to the contrary. It does not "kick start" a project as they are MORE work, MORE code, and something MORE to learn.

IF you are using semantic markup, coding with progressive enhancement and separation of presentation from content, you should be writing less code than you would with the framework using simpler and typically far less HTML. CSS3 has made life simpler on that front as well since a lot of the stuff that required complex positioning of images can now be done without them.

Frameworks make you write more HTML, make you design more fragile and less agile layouts, and result in pages that before you even plug in your content can be as much as twice the code size they should be. ANYONE telling you there are advantages to using them doesn't know enough HTML or CSS to be building websites in the first place. Same goes for scripting frameworks like jQuery, which seem to exist just to either put crap on websites that have no business on sites in the first place, or is CSS' job.

Though if you aren't using HTML properly and just slapping classes in willy-nilly, with no logical heading orders, heading tags around things that aren't headings, no sensible nesting, paragraphs around non-paragraph elements and endless pointless DIV for nothing -- then yeah, you might find the framework "easier" -- far easier would be to use "semantic markup"; which to be frank is a sick euphemism for "using HTML properly" used so we don't upset the nubes with the truth.

Sorry if that sounds harsh, but the truth often is.

Again, if you'd be willing to post a link to where you're at so far, I could probably give you some pointers on how to clean it up and lose the framework gibberish -- if you don't want it public just yet, feel free to send it via PM.

 

Thank you so much! I will post here if I'm wired up in something that I can't untangle!