title: How to use bootstrap to hide one of div when zoom browser windows size smaller
body: <p>I use bootstrap to design my web UI , and now I have a requirement as below:</p>
  
  <p>I define the below div structure as their div ids are : <strong>part1</strong> and <strong>part2</strong> </p>
  
  <pre><code>    &lt;div class="container"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div id="part1" class="col-md-6"&gt;
                      &lt;div&gt;
                          xxxx
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="part2" class="col-md-6"&gt;
                      &lt;div&gt;
                          yyy
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to hide the part1 automatically when shrink browser window size  or my phone browser , How can I achieve this effect ?</p>
  
  <p>BTW:  I try to add css "collapse" to <strong>part1</strong> as  , but it hide directly even my browser is larger .</p>