How to vertically stack bootstrap elements - html

Question

I've got a header, paragraph and image, and I want them aligned with the header above the paragraph, and the image to the right. When I run it I get the 3 elements in a horizontal row
<div class="container">
<div class="row">
<h1 class="col-xs-3 paddingtop">Joselin</h1>
<p class="col-xs-3 bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>

Answer 1

If the h1 should be above the p and the img, the best thing would be to put it in its own row: <div class="row">. Then put the p and the img in a row right under that.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h1 class="paddingtop">Joselin</h1>
<p class="bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
</div>
<div class="col-xs-6">
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>
</div>
You can then play around with the column sizes (`class="col-xs-3").