ブートストラップの応答カラム

Question

1つの列（col-lg-12）と2つの列（col-lg-12）を持つ1つの行を作成しました。小さなデバイスでは、 2番目の行と。

<div class="container"> 
    <!------------------------------------ first section--------------------------------------------------> 
    <div class="row" id="firstSection"> 
     <div class="col-lg-12"> 
      <span class="glyphicon glyphicon-tree-deciduous"></span> 
      <h2 class="heading2">Your home away from home</h2> 
      <h4>Prima luce, cum quibus mons aliud consensu ab eo. Praeterea iter est quasdam res ex<br/>communi.Etiam habetis sem dicantur magna mollis euismod.</h4> 
      <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorem id in inventore, maiores consequuntur modi? Omnis dolore quam vel. Illo accusantium, porro laudantium saepe necessitatibus id ullam voluptate nihil!<br/></p> 
     </div> 
    </div> 
    <!------------------------------------ end of first section--------------------------------------------------> 

    <!------------------------------------ second section--------------------------------------------------> 
    <div class="row" id="secondSection"> 
      <div class="col-lg-6"> 
       <article class="section1">        
        <span class="glyphicon glyphicon-tree-deciduous"></span> 
        <h2>BUSINESS TRAVELLER</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi! and fre</p> 
        <button type="button" class="btn btn-default">READ MORE</button>    
       </article>  
      </div><!-- end of column ---> 

      <div class="col-lg-6"> 
       <section class="section2"> 
        <span class="glyphicon glyphicon-tree-deciduous"></span> 
        <h2>ACCOMPANYING A LOVED-ONE</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing  elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p> 
        <button type="button" class="btn btn-default">READ MORE</button> 
       </section> 
      </div><!-- end of column --->  
    </div><!-- row -->!> 
     <!------------------------------------ end of second section-------------------------------------------> 
</div><!-- end of container --> 

以下は、CSSコードにある

#firstSection{ 
    background-color:#ffffff; 
    margin-left:12px; 
    margin-right:12px; 
    padding-top: 120px; 
    margin-top:-80px; 
    } 

    .section1{ 
    background: #ffffff; 
    padding: 50px; 
    margin-top:30px; 
    margin-left:px; 
    } 
    .section2{ 
    background: #ffffff; 
    padding: 50px; 
    margin-left:20px; 
    margin-top:30px; 
    } 

Answer 1

変更あなたの<div>宣言これらのdiv要素に任意のマージンやパディングを追加しないと同じ位置合わせのための

<div class="col-lg-12 col-xs-12"> <!-- this will align the element in the same manner on small screen as it would have on larger screens --> 

を次のように