Flexbox没有连续对齐div

Question

我在尝试使用flexbox来显示两个并排显示左侧图像大小的div时遇到了麻烦。我只是试图以最基本的方式实现flexbox，我不能让div以除列之外的任何其他方式对齐。

这是所需的布局：

目前的情况如下：

我正在关注this guide将它们嵌套成行

/*On the flex container*/
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

我的SCSS：

.child {
  background-color: #6d6e71;
  color: #f0f0f1;
  border: 1px solid red;
  text-align: center;

  h2 {
    text-align: center;
    color: #f0f0f1;
    font-size: 36px;
    font-family: $font-family-sans-serif;
  }
  p {
    text-align: center;
    color: #f0f0f1;
    font-size: 12px;
    font-family: $font-family-sans-serif;
  }
}
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

}

我的HTML：

<div class="row flexcontainer">

  <div class="large-6 child">
    <img src="<%= image_path('products/foo.jpg') %>" alt="jaroa">  
  </div>
  <div class="large-6 child">
    <h2>TITLE</h2>
    <h2>$0</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
  </div>

</div>