使用Flexbox将内容居中对齐

Question

鉴于以下标记，当显示低于768像素时，我需要使标题和图标位于左侧，以移动到右侧内容的上方中心。我有flexbox布局设置，但无法使用flex wrap来为响应布局的组件的两个部分工作。

.FeaturesDetailed-keyFeaturesWrapper-236 {
  display: flex;
  margin-bottom: 100px;
  flex-direction: column;
  flex-wrap: wrap;
}

.FeaturesDetailed-keyFeatureTile-237 {
  margin: 0 auto;
  margin-bottom: -66px;
}

.FeaturesDetailed-keyFeatureIconWrap-243 {
  left: 35px;
  color: orange;
  position: relative;
}

.FeaturesDetailed-keyFeatureHeader-242 {
  width: 200px;
  color: #000;
  margin: -9px 0px 20px -165px;
  text-align: right;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  position: relative;
}

[class^="icon-"] {
  font-family: "icons" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  position: relative;
}

@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237 {
    flex-direction: column;
    flex-flow: wrap;
    width: 400px;
    margin: 0 auto;
    margin-top: 2.5rem;
  }
}

<div class="FeaturesDetailed-keyFeaturesWrapper-236">
  <div class="FeaturesDetailed-keyFeatureTile-237">
    <div class="FeaturesDetailed-keyFeatureIconWrap-243">
      <p class="FeaturesDetailed-keyFeatureHeader-242">Header content here</p><span class="wrap-icon Icon-root-115 FeaturesDetailed-Icon-239"><style>.icon-clone:before { content: "\e90d"}</style><span aria-hidden="true" class="icon-clone" style="font-size: 52px; line-height: 52px;"></span></span>
    </div>
    <div class="FeaturesDetailed-keyFeatureCopyWrap-238">
      <p class="FeaturesDetailed-heading-240">Lots of content here.</p>
      <p class="FeaturesDetailed-subtext-241">Subsection of content here</p>
    </div>
  </div>
</div>

JSFiddle链接：Link