Better support across different device sizes

[bryanwillis]

The current content sidebar would display better with different layouts on smaller screen sizes and even hiding the sidebar all together on mobile devices. Currently the sidebar doesn't display well when it reaches sm browser sizes becauses it squishes all the widgets inside. This seems to be a pretty good fix at least for the default layout.

Additionally, this works/looks even better when slightly changing the column widths on lg devices

@media (min-width: 1200px) {

    .content-sidebar .container {
        width: 1150px;
    }

    /* content-sidebar*/
    .content-sidebar .content.col-lg-9 {
        width: 70%;
    }
    .content-sidebar .sidebar.col-lg-3 {
        width: 30%;
    }

}

Before:

After:

We could also do this for other layouts as well. For example sidebar-content (below). This one doesn't look as awkward on medium displays, so that size could go either way in terms of columns ( 3-9 or 4-8).

@media (min-width: 1200px) {
   /* sidebar-content*/
    .sidebar-content .content.col-lg-push-3 {
        left: 30%;
        width: 70%;
    }
    .sidebar-content .sidebar.col-lg-pull-9 {
        right: 70%;
        width: 30%;
    }
    .col-lg-push-3 {
        left: 30%!important;
    }
}

 if ( 'sidebar-content' === $layout ) {
        $classes_to_add['content'] = 'col-xs-12 col-sm-12 col-md-8 col-lg-9 col-md-push-4 col-lg-push-3';
        $classes_to_add['sidebar-primary'] = 'hidden-xs hidden-sm col-md-4 col-lg-3 col-md-pull-8 col-lg-pull-9';
    }

[salcode]

Let's move this conversation into #108. I think you bring up a good point about the sidebar on the sm breakpoint.

Also, I believe you can eliminate col-sm-12 from col-sm-12 col-md-8 col-lg-9 since once you get below col-md-8, if nothing is defined I believe it defaults to 12 columns.

Thanks for bringing this conversation up.

[salcode]

See #108 and #119