div

Question

我有一行有3列 - 图像，文字，图像。我希望内容垂直居中，图像在框外。如何在调整大小时缩放图像以使内容在移动设备上看起来很好？因为我想移动图像在文本上方。

.container {
  max-width: 850px;
}

.outer-box {
  position: relative;
  -webkit-box-shadow: 1px 1px 21px 0px rgba(63, 63, 63, 0.08);
  -moz-box-shadow: 1px 1px 21px 0px rgba(63, 63, 63, 0.08);
  box-shadow: 1px 1px 21px 0px rgba(63, 63, 63, 0.08);
  border-radius: 10px;
  padding: 55px 45px;
  background-color: #fff;
}

.inner-box {
  position: relative;
  -webkit-box-shadow: 1px 1px 21px 0px rgba(63, 63, 63, 0.08);
  -moz-box-shadow: 1px 1px 21px 0px rgba(63, 63, 63, 0.08);
  box-shadow: 1px 1px 21px 0px rgba(63, 63, 63, 0.08);
  border-radius: 10px;
  padding: 45px 30px 45px 0;
  margin-bottom: 40px;
  background-color: #fff;
}

.img {
  position: absolute;
  top: -68px;
  left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="outer-box">
        <div class="inner-box">
          <div class="row">

            <div class="col-sm-5">
              <img src="https://i.imgur.com/nXbw78u.png" alt="" class="img">
            </div>

            <div class="col-sm-6 col-md-5">
              <p class="text-uppercase">Lorem Ipsum</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>

            <div class="hidden-xs col-sm-1 col-md-2 text-right">
              <img src="https://i.imgur.com/PzT4iyc.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>