小屏幕图像下方的文字

Question

我有3排并排的图像和文字。

第一行的图像将在左侧，文本在右侧。 在第二行上，图像将在右侧，文本应在左侧。 在第三行中，图像将在左侧，文本在右侧。

我需要的是，在手机屏幕上，图像应位于顶部，文本应位于图像下方。当文本位于图像上方时，此方法对于第一行和第三行均适用，但对第二行则无效。

在小屏幕上，每一行的图像下方如何显示文字，您有任何线索吗？

这是html代码

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="services">
  <div services class="container">
    <!-- Services Section -->

    <div class="block">
      <div class="row text-center">
        <div class="col-xs-12 col-sm-6 col-md-6">
          <img class="img-responsive" src="images/carousel/html-code.jpg" alt="html code">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <h2>Header</h2>
          <p>Paragraph</p>
        </div>
      </div>
    </div>

    <div class="block">
      <div class="row text-center">
        <div class="col-xs-12 col-sm-6 col-md-6">
          <h2>Header</h2>
          <p>Paragraph</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <img class="img-responsive" src="images/carousel/graphic-art-design.jpg" alt="html code">
        </div>
      </div>
    </div>