如何将同一图像放在同一列的顶部和底部？

Question

所以标题几乎解释了我的问题。现在，我将我的图像放在列的顶部，同时我需要将它放在底部。我怎么能这样做？

My Codepen

HTML

<div class="content">
  <div class="row">
    <div class="col-md-10 first-column"></div>
    <div class="col-md-2 back-to-blog">
      <a href="/">
        <img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
      </a>
    </div>
    </div>
  </div>
</div>

CSS

.content {
  padding: 0 35px;
}

.first-column {
  border: 1px solid;
  height: 200px;
}

Answer 1

Flexbox可以做到这一点：

.content {
  padding: 0 35px;
}
.row {
  display: flex; /* columns now equal height */
}
.first-column {
  border: 1px solid;
  height: 200px;
  flex: 10; /* replicates md-10 */
}
.back-to-blog {
  flex: 2; /* replicates md-2 */
  display: flex;
  flex-direction: column; /* sets directionality */
  justify-content: space-between; /* separates elements across direction */
}

a {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <div class="row">
    <div class="col-md-10 first-column"></div>
    <div class="col-md-2 back-to-blog">
      <a href="/">
        <img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
      </a>
      <a href="/">
        <img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
      </a>
    </div>
  </div>
</div>
</div>

Answer 2

如果你想坚持使用Bootstrap列类，这是另一种方法：

HTML：

<div class="content">
  <div class="row">
    <div class="col-xs-2 col-sm-10 col-md-10 first-column">aaa</div>
    <div class="col-xs-2 col-sm-2 col-md-2 back-to-blog">
      <a href="/"><img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize"></a>
      <a href="/" class="btm-link"><img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize"></a>
    </div>
    </div>
  </div>
</div>

CSS：

.content {
  padding: 0 35px;
}

.first-column {
  border: 1px solid;
  height: 200px;
}
.back-to-blog{
  height: 200px;
}
.btm-link{
  position: absolute;
  bottom: 0;
}

Codepen： http://codepen.io/anon/pen/xZyGoQ