html5 - 在 bootstrap 中将特定的列元素移动到行的顶部

如图所示，我需要对齐部分信息。
这是桌面视图：
这里是mobile视图，节头“Welcome”应该移动到mobile视图的行的顶部，如图
但在我的程序中，它像通常预期的那样与段落保持一致，并在图像下显示出来。
注意：显示的图像是我想要的输出，我没有得到。
我对CSS有点陌生，我需要解决这个问题。
这是我的密码

.col-centered {
   text-align: left;
   padding-top: 10px;
   padding-bottom: 10px;

}

<div class="row">
                <div class="col-sm-5 col-centered">
                        <img class="img-responsive" src="./Assets/Welcome_image.png" alt="WelcomeImage" />
                </div>

                <section class="col-sm-7 col-centered">
                    <h2 id="textheading">Welcome</h2>
                                    <p>Provide highest quality education to students. give studnets more than what we promise them.Children of the ages between 18 months and 6 years are extremely receptive. Kids Planet Kids pre-schools' fun filled programme makes the most of this by encouraging the childrens to understand and develop socail skills, gross and fine major skills and creativity at the same time, throug songs, music and imaginative play.</p>
                    <p><mark> Read More </mark></p>

                </section>
            </div>

            <div class="row">
                <div class="col-sm-5 col-centered">
                    <img class="img-responsive" src="./Assets/AboutusImage.png" alt="AboutUsImage" />
                </div>
                <section class="col-sm-7 col-centered">
                    <h2 id="textheading">About Us</h2>
                    <p>Kids Planet is a leading education and test preparation comapny, head quartered in Secunderabad, has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India. Kids Planet is a leading education and test preparation comapny, head quantered in secunderanbad. Has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India.</p>
                    <p><mark> Read More </mark></p>
                </section>
            </div>

最佳答案

更新
现在，有了新的信息，您需要利用helper classes to Show/Hide elements
我创建了一个复制的h2元素来根据视窗的宽度显示/隐藏，并将其放置在图像的顶部。这样地：

  <div class="visible-xs-block col-xs-6 col-xs-offset-3">
    <h2 id="textheading">Welcome</h2>
  </div>

  <div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
    <img class="img-responsive" src="http://lorempixel.com/300/300" alt="WelcomeImage" />
  </div>

  <section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">

    <h2 id="textheading" class="visible-sm-block visible-md-block visible-lg-block">Welcome</h2>

    ...
  </section>

我还消除了对col-centered的需要，并根据需要使用col-xs-offset-#。
如果这不起作用，请告诉我：）
请参阅更新的演示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="visible-xs-block col-xs-6 col-xs-offset-3">
    <h2 id="textheading">Welcome</h2>
  </div>

  <div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
    <img class="img-responsive" src="http://lorempixel.com/300/300" alt="WelcomeImage" />
  </div>

  <section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">
    <h2 id="textheading" class="hidden-xs">Welcome</h2>
    <p>Provide highest quality education to students. give studnets more than what we promise them.Children of the ages between 18 months and 6 years are extremely receptive. Kids Planet Kids pre-schools' fun filled programme makes the most of this by encouraging
      the childrens to understand and develop socail skills, gross and fine major skills and creativity at the same time, throug songs, music and imaginative play.</p>
    <p><mark> Read More </mark></p>

  </section>
</div>

<div class="row">
  <div class="hidden-sm hidden-md hidden-lg col-xs-6 col-xs-offset-3">
    <h2 id="textheading">About Us</h2>
  </div>

  <div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
    <img class="img-responsive" src="http://lorempixel.com/300/300" alt="AboutUsImage" />
  </div>

  <section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">
    <h2 id="textheading" class="visible-sm-block visible-md-block visible-lg-block">About Us</h2>
    <p>Kids Planet is a leading education and test preparation comapny, head quartered in Secunderabad, has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India. Kids Planet is a leading education and
      test preparation comapny, head quantered in secunderanbad. Has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India.</p>
    <p><mark> Read More </mark></p>
  </section>
</div>

澄清后删除旧答案

关于html5 - 在 bootstrap 中将特定的列元素移动到行的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45314627/