title: Resizing the CSS shape elements with browser
body: <p>I am new to Bootstrap. I have created some shapes using CSS and would like it to be resized along with browser. I have included the min.css. </p>
  
  <p>In larger screen, it looks like this, I want the same layout</p>
  
  <p><a href="https://i.stack.imgur.com/qVeEJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qVeEJ.jpg" alt="enter image description here"></a></p>
  
  <p>I have created a square and two circles. When I resize, I get it stacked one below the other. I would like to have the same layout I see in large devices in mobile too, but I cant get it to shrink.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="mainpage" class="container"&gt;   
              &lt;div class="row"&gt;
  
                  &lt;div class="col-md-4 col-md-offset-2" id="sqr"&gt;
                  &lt;/div&gt;  
                   &lt;div class="col-md-3"&gt;
                      &lt;div class="row" id="circle1"&gt;&lt;/div&gt;
                      &lt;div class="row" id="circle2"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  css:
  
  #sqr
  {
      height: 400px;
      width:400px;
      background-color: red;
  }
  #circle1
  {
  
      width:14em;
      height:14em;
      border-radius: 50%;
      background-color: blue;
  }
  #circle2
  {
      width:14em;
      height:14em;
      border-radius: 50%;
      background-color: green;
  }
  </code></pre>