Bootstrap 3 stacking issue - 1st col drops on medium
I have the code below in Bootstrap 3. It all works perfectly except if you are on the tablet the logo drops down and doesn't stay top left. It works great on phone and works great on desktop.... What am I missing?
logo imageSearch bar goes here
Problem courtesy of: chrislhardin
I believe that this is occurring because you only allow 2 bootstrap columns for BOTH "sharing icons" and "account login". So when you get to tablet size, 2 columns is not enough room and it wraps the "account login" (it does not wrap "sharing icons" because that element has the
pull-rightclass on it).
You can fix this by reducing the unnecessary 8 columns for the search bar to 7 when in
col-sm(tablet size), so that the wrapper for "sharing icons" and "account login" can have 3 columns instead of 2, while allowing it to still be 8 in
sharing iconsaccount login
Search bar goes hereSolution courtesy of: Tricky12
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here