如何将徽标级别保留在名称和标题的左侧？

Question

我希望徽标和名称/标题看起来如下图所示。当显示屏缩小到较小尺寸时，我希望徽标保留在名称/标题的左侧。（现在徽标跳到上面）请指教！谢谢！

这是我的HTML代码：

<header>
    <div class="row">
        <div class="col-md-6">
            <figure>
                <img id = "title-logo" src="Images/Logo.png" width="100" height="100" class= "img-responsive" alt="Udacity_logo">
            </figure>
        </div>
        <section class="col-md-6 text-right text-uppercase">
            <h1 class="title-super text-thin">Jane Doette</h1>
            <h4>Front-end Ninja</h4>
        </section>
    </div>
</header> 

这是我的CSS：

.title-super, .text-thin {
    font-size: 60px;
    color: #2d3c49;
    font-weight: 200;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.title-logo {
    margin-top: 20px;

}

Answer 1

使用flexbox :(不要使用其余的样式，因此示例看起来很糟糕但有效）

＆＃13;

＆＃13;

header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-super,
.text-thin {
  font-size: 60px;
  color: #2d3c49;
  font-weight: 200;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.title-logo {
  margin-top: 20px;
}

＆＃13;

<header>
  <div class="row">
    <div class="col-md-6">
      <figure>
        <img id="title-logo" src="Images/Logo.png" width="100" height="100" class="img-responsive" alt="Udacity_logo">
      </figure>
    </div>
    <section class="col-md-6 text-right text-uppercase">
      <h1 class="title-super text-thin">Jane Doette</h1>
      <h4>Front-end Ninja</h4>
    </section>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加较小尺寸屏幕的课程

<div class="col-lg-x col-md-x col-xs-x">
 <figure>
   <img id="title-logo" src="Images/Logo.png" width="100" height="100" class= "img-responsive" alt="Udacity_logo">
 </figure>
</div>

其中“x”是列大小。循环通过它们，直到找到合适的一个。 http://getbootstrap.com/css/#grid-options