將特定列元素移動到引導程序中的行頂部

Question

我需要對齊圖中所示的節信息。 這裏的桌面視圖：

而這裏的移動視圖，節頭「歡迎」應該移動到行的頂部在移動視圖圖所示

但是在我的程序，它像通常預期的那樣堅持該段落，並在圖像下落下。

注意：圖像是我想要的輸出，我沒有得到。 我對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>

Answer 1

更新

現在，隨着新的信息，你需要使用的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>

---

老的回答澄清後刪除