Align a Logo to Left of Container? - css

Question

I am trying to achieve a complex layout with the top nav in a container that aligns with the body content that is also in a container. However, to the left of the nav container, which I assume should be a container-fluid. I would like there to be a logo to the left of that centered at all times.
I've tried positioning it absolutely but then that gets messy across devices. I would like a setup where I can just have it collapse above the nav container and the other containers/columns follow underneath it.
JS Fiddle:
https://jsfiddle.net/x58975c3/
Here is an example of the desired layout:
<div class="container-fluid">
<div class="col-md-4 logo">
Logo
</div>
<div class="col-md-8 nav">
Nav
</div>
</div>
<div class="container container-content">
<div class="row">
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
Is this possible with Bootstrap or better suited for something like Flexbox?

Answer 1

You can do a mix of FlexBox and positioned (absolute/relative).
https://jsfiddle.net/pablodarde/rt38mynd/
html
<div class="container">
<div class="nav-logo">Logo Here</div>
<div class="content">
<div class="nav-bar">
<span>NAV CONTAINER AND HEADER ITEMS</span>
</div>
<div class="body-container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
css
.container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
background: #dedede;
}
.nav-logo {
position: absolute;
width: 12.5%;
height: 50px;
background: #f0f;
}
.content {
width: 75%;
margin: 0 auto;
background: #000;
}
.nav-bar {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width 100%;
height: 50px;
background: red;
}
.body-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.body-container div {
background: yellow;
}

Answer 2

You can put the second container within the col-md-8 column, like so: https://jsfiddle.net/0kx5rz9x/
This will also cause the logo to stack on top of the main container on mobile.

Answer 3

I've been using Flexbox, because it's more easier, and it's pretty fun to build your own css structure without the help from frameworks. I recommend this site: http://the-echoplex.net/flexyboxes/. You can set the number of elements on a container and test the positioning. Take a look, The flex-flow= row | column and the justify-content is an big solution for the resposive ^^;
I also use this site to diference and remember a little of the syntax https://css-tricks.com/snippets/css/a-guide-to-flexbox/