Ответственные столбцы в бутстрапе

Question

Я создал одну строку с одним столбцом (col-lg-12) и еще одну строку с двумя столбцами (col-lg-12). Я заметил, что в маленьких устройствах первая строка неправильно выравнивается со второй строкой.

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

для идентичного выравнивания не добавляйте поля или отступы к этим дивы