twitter bootstrap - Responsive 2-columns squares in CSS -

i'm trying create responsive page squares taking 50% of full width (2 squares per row). on mobile (including iphone 6/7 plus), squares should 1 under other that's it's not working following code:

.square {   width: 100vw;   height: 100vw;   float: left; }  @media (min-width: 1170px) {   .square {width: 50vw; height: 50vw; } } 

ideally use bootstrap can't figure how create squares.

bootstrap example:

<div class="container">   <div class="row">     <div class="col-lg-6">       <div class="square"></div>     </div>     <div class="col-lg-6">       <div class="square"></div>     </div>   </div> </div> 

css:

.square {   height: 0;   padding-bottom: 100%;   background-color: green; } 

http://codepen.io/deka87/pen/ymrmkk