How can i create this layout using Bootstrap grid? - html

Question

Im designing a Bootstrap template that needs to have a sidebar on the left side (Logo, nav buttons and Contact Info) and Main content on the right side.
The problem is that i need the Contact Info div to go after the Main content div. How can i do this?
This is the code i have so far...but the contact info gets pushed to the bottom of the page (depending on the main content lenght), and i need it to be just after the sidebar links
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
NAVS LINKS
</div>
<div class="col-md-9">
MAIN CONTENT
</div>
</div>
<div class="row">
<div class="col-md-3">
CONTACT INFO
</div>
</div>
</div>

Answer 1

Is this what you want? try removing a row and put the contact info in the same column as the navbar links.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<li>HomePage</li>
<li>Buy</li>
<li>Sell</li>
<li>About us</li>
<li>Location </li>
<div class="contact">
CONTACT INFO<br>
John Smith<br>
[phone]<br>
johnsmith#internet.com<br>
</div>
</div>
<div class="col-md-9">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro sit
dignissimos ad, beatae amet dolorem voluptatibus nisi harum ab odit,
exomnis nobis facere nesciunt totam inventore rerum quos quaerat.
Lorem
ipsum dolor sit amet consectetur adipisicing elit. In saepe
provident
eligendi ex, eum consequuntur omnis nostrum amet maxime praesentium
sunt nulla velit sapiente similique id impedit optio laborum?
Distinctio.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro sit
</div>
</div>
if you want the contact info after the main content. just put it in the column as the content but if you want the contact info all across then just do a new row and set the column to 12.
<div class="row">
<div class="col-md-3"> <--- set this to 12 if you want it all the way across
CONTACT INFO
</div>
</div>