Setting up the index page
The layout for the body of the page is the first place where we will use some different grid classes. When the project is viewed on the desktop, there will be a main feed on the left and a sidebar on the right. If we switch to viewing this on a mobile device, there will be only one column with the sidebar sliding in below the main feed. Here's the grid code we'll use to set this up:
<div class="col-xs-12 col-lg-8"> … </div> <div class="col-xs-12 col-lg-3 col-lg-offset-1"> … </div>
The first column uses the col-lg-8 class for the desktop, which will set the feed to roughly three-fourth of the width of the layout. However, for mobile devices, I'm using the col-xs-12 class because I want it to span the width of the layout. The second column is the sidebar and for the desktop I'm offsetting it by one column with the col-lg-offset-1 class, then I'm using the col-lg-3 class to fill in the rest of the row. This will set the sidebar to be roughly the...
