title: displaying 2 product per row on phone and 4 product per row on desktop using bootstrap
body: <p>I am building a static e-commerce website using bootstrap. I want 2 product in a row while it opens in the phone and 4 product in a row while open in desktop or i-pad. </p>
  
  <pre><code>&lt;div class="container"&gt;
  
   &lt;div class="row product"&gt;
      &lt;div class="col-md-3"&gt;
          &lt;div class="image"&gt;
              &lt;a href="products.php?q=10020" target="_blank"&gt;&lt;img id="10030" src="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;div class="image"&gt;
              &lt;a href="products.php?q=10020" target="_blank"&gt;&lt;img id="10030" src="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;div class="image"&gt;
              &lt;a href="products.php?q=10020" target="_blank"&gt;&lt;img id="10030" src="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;div class="image"&gt;
              &lt;a href="products.php?q=10020" target="_blank"&gt;&lt;img id="10030" src="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt; 
  </code></pre>
  
  <p></p>
  
  <p>There is more than 1 row on this page. 
  please help me to solve this.</p>