LPS-44257 Portal dockbar appears in two lines on mobile devices

Hey @Robert-Frampton,

Here is an update for https://issues.liferay.com/browse/LPS-44257.

I changed flex-grow to flex-shrink to solve the issue of the extra space between nav-collapse groups in control panel. This fix works in Chrome, FF, IE 10-11, and iOS 7. I don't have access to Safari/iOS 6 so I can't confirm how this works in iOS 6.

Due to the lack of support for flex-grow and flex-shrink as independent values in the old flexbox syntax, I need to rearrange the order of the nav-collapse groups in order to solve the issue in control panel. This is what it looks like in Safari 5. 

![screenshot 2014-04-14 16 41 29](https://cloud.githubusercontent.com/assets/5168351/2710981/598706b0-c4c8-11e3-8edf-615779b3faf2.png)

Please let me know if there is any issue. Thank you!