title: Responsive 2-columns squares in CSS
body: <p>I'm trying to create a responsive page with squares taking 50% of full width (2 squares per row). On mobile (including iPhone 6/7 Plus), those squares should be one under the other but that's where it's not working with the following code:</p>
  
  <pre><code>.square {
    width: 100vw;
    height: 100vw;
    float: left;
  }
  
  @media (min-width: 1170px) {
    .square {width: 50vw; height: 50vw; }
  }
  </code></pre>
  
  <p>Ideally I would use Bootstrap but I can't figure how to create squares.</p>