Bootstrap heading align center

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h2>Some heading</h2>
            <p>I want all this text centred relative to the image next door</p>            
         </div>
         <div class="col-sm-6 image">
             <img class="img-responsive" src="http://i.imgur.com/cztLHHo.png"/>
        </div>
    </div>
</div>

CSS

.row
{
 display: flex;
    align-items: center; 
    
}
.col-sm-6{
  bakground:red;
}