twitter/bootstrap — Issue #1633: [css] CSS file load order can break layouts; default alphabetical is broken
Author: ccheaton
Created: 2012-02-02 20:49:34+00:00
State: open

This took me forever to figure out. I wanted to start a new Rails app using the Bootstrap "fluid layout" example. It works fine at full width, but didn't work when the browser was narrow. Nothing collapsed properly.

I manually added the Bootstrap files to the Rails app. Rails loaded them in the order:

```
bootstrap-responsive.css
bootstrap.css
```

and:

```
bootstrap-responsive.min.css
bootstrap.min.css
```

This all happens automagically in rails, via the header line `<%= stylesheet_link_tag "application", :media => "all" %>`. It wasn't until I took the source from your example website and the source from my app and poked at it for a while that I figured out the issue.

I changed the name of the `-responsive` versions to be `bootstrapz-responsive....` and they loaded in the proper order, and voila -- the example template worked as expected.

This might not be a bug, per se, though I can imagine a lot of other people doing the same thing and getting frustrated. I suggest you change the names of the files so that frameworks that automatically load and/or compile them will do so in the order in which they must be included to work properly.