Text | Image | Text - 1 Horizontal Row - Bootstrap - html

Question

First of all, I will immediately apologise for the fact that it would appear that I am asking the same question which has been answered several times on here already.
Despite spending the last 1-2 hours trying to find the answer, I have caved in and am looking for someone to give it to me, but to also explain why I was wrong.
EDIT
I can't get the 2 div's of text, and the image in 1 ROW using Bootstrap.
I want TEXT | PIC | TEXT.
Here's the HTML using Bootstrap:
<div class="container">
<div class="row-fluid">
<div class="MainLeftInfo col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h3 style="bold">The Story</h3>
<p>Text Text Text</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="PicOfMe col-lg-3 col-md-3 col-sm-12 col-xs-12">
<img src="Pictures\jacksparrow.jpg" alt="A picture of me!">
</div>
<div class="MainRightInfo col-lg-3 col-md-3 col-sm-12 col-xs-12">
<h3> Interests, Hobbies and Addictions </h3>
<ul>
<li>Gaming (Xbox & PC)</li>
<li>Animals</li>
<li>Web Development</li>
<li>Red Bull</li>
<li>Chocolate</li>
</ul>
<h3> Location </h3>
<p> Cranleigh, Surrey</p>
<h3> Skillset (So Far) </h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Responsive Web Design (Bootstrap)</li>
<li>Ability to liase and discuss technical concepts with non-technical people</li>
</ul>
</div>
</div>
</div>
Heres the CSS:
.PicOfMe img {
border: 20px solid white;
border-radius: 100%;
width: 200px;
height: 200px;
margin: 0 auto;
}

Answer 1

You just need 1 container on a page, and move all col-* divs into the the ` like this:
<div class="container">
<div class="row">
<div class="MainLeftInfo col-md-4 col-sm-12 col-xs-12">
<!-- the story -->
</div>
<div class="PicOfMe col-md-4 col-sm-12 col-xs-12">
<img src="Pictures\jacksparrow.jpg" alt="A picture of me!">
</div>
<div class="MainRightInfo col-md-4 col-sm-12 col-xs-12">
<!-- interests -->
</div>
</div>
</div>
Comment about Bootstraps grid system: all col-*adds up to 12; probably you want to change col-md-3 to col-md-4? Also, it's not necessary to define the same columns twice. col-md-4 will create the same as col-lg-4 on wider screens. Bootstrap works "bottom > up" (or "smaller > large")
See plunkr https://plnkr.co/edit/8zYl7pODUi9bzFicLG19?p=preview