Moving a particular column element to the top of a row in bootstrap

Question

I need to align the section information as shown in the figure. Here's the desktop view :

And here's the mobile view, The Section header "Welcome" should move to the top of the row in the mobile view as shown in the figure

But in my program, it sticks with the paragraph as normally expected and comes down under the image.

NOTE: THE IMAGE SHOWN IS MY DESIRED OUTPUT which I'm not getting. I am somewhat new to CSS and I need to solve this issue. Here's my code

.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>

Answer 1

Updated

Now, with new information, you need to make use of the helper classes to Show/Hide elements

I created a duplicate h2 element to show/hide according to the width of the viewport and placed it on top of the image. Like this:

  <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>

I also removed the need for the col-centered and made use of the col-xs-offset-# as needed.

Let me know if this does not work :)

See updated demo:

<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>

---

Old answer deleted after clarifications