need to fix a bootstrap 3 layout : On bootstrap 3,I can't make the layout how I want to and I can't see why. 

My HTML :

        <div class="container">
           <div id="row1" class="row">
         <div class="col-lg-4 col-lg-push-8 col-md-4 col-md-push-8 col-sm-push-8 col-sm-4">
           <div class="round"></div>
         </div>
         <div class="col-lg-8 col-lg-pull-4 col-md-8 col-md-pull-4 col-sm-8 col-sm-pull-4 intro-text">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
         </div>
       </div>
       <div id="row2" class="row">
         <div class="col-lg-4 col-md-4 col-sm-4">
           <div class="round"></div>
         </div>
         <div class="col-lg-8 col-md-8 col-sm-8 intro-text">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
         </div>
       </div>
       </div>


My CSS :

    #row1 {
      opacity:0.3;
      background-color: red;
    }

    #row2 {
    opacity:0.3;
    background-color: yellow;
    }
    .intro-text {
     text-align:center;
    }
    .round {
     background:#bfd70e;
     border-radius:50%;
     width:160px;
     height:160px;
     border:2px solid #679403; 
     margin:0 auto;
     }
     @media(min-width:767px) {
      .intro-text {
      margin-top:60px;
      }
     #row2 {
     margin-top:-15px;
     }  
}

I want to keep the same structure as the first JS fiddle but gain some space by making the row 2 over the first one. So I tried a margin-top but it break all the structure, I don't know why.


This is JS fiddle without :

    #row2 {
         margin-top:-15px;
         } 


[JS fiddle][1]

This is JS fiddle with 

    #row2 {
             margin-top:-15px;
             }

[JS fiddle][2]
   

How do I fix that ?



  [1]: https://jsfiddle.net/7urbw4kq/
  [2]: https://jsfiddle.net/584wcaa5/