Hello,
The problem you're running into is from the fact that the Bootstrap CSS assumes that your content will be written up in the way you want your site to be formatted. But with the blog, instead of having the content moved, such as the navigation appearing above the blog list for a left navigation layout or the navigation appearing under the blog list for a right navigation layout within the markup, you have to make the layout change with CSS. Because everything is floated left in Bootstrap we will have to add some supplementary CSS to get the desired effect.
Add this CSS in the bottom of your style-blog.css:
.blogwrapper.blogview,
.blogmodule .blogwrapper {
margin-left: -20px;
*zoom: 1;
}
.blogwrapper.blogview:before,
.blogmodule .blogwrapper:before,
.blogwrapper.blogview:after,
.blogmodule .blogwrapper:after {
display: table;
content: "";
}
.blogwrapper.blogview:after,
.blogmodule .blogwrapper:after {
clear: both;
}
.blognavleft,
.blogcenter-rightnav {
float: left;
}
.blognavright,
.blogcenter-leftnav {
float: right;
}
As you can see here, we're adding style to float the navigation and the blog list to either side when the classes from the settings are added, and suplimenting some missing style to keep things the same when viewing the blog post. This should fix your problems.
HTH,
-Elijah