How to use bootstrap to hide one of div when zoom browser windows size smaller

Question

I use bootstrap to design my web UI, and now I have a requirement as below:

I define the below div structure as their div ids are : part1 and part2

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="part1" class="col-md-6">
                    <div>
                        xxxx
                    </div>
                </div>
                <div id="part2" class="col-md-6">
                    <div>
                        yyy
                    </div>
                </div>
            </div>
        </div>
    </div>

Now I want to hide the part1 automatically when shrink browser window size or my phone browser , How can I achieve this effect ?

I try to add css "collapse" to part1 as <div id="part1" class="col-md-6 collapse">, but it hides directly even my browser is larger.

Answer 1

Right Answer for Bootstrap 3

Use utility classes for showing and hiding content by decice via media query. Try to use thses on a limited basis and avoid creating entirely differnet versions of the smae site. Instead, use them to complement each device's presentation.

Source: http://getbootstrap.com/css/#responsive-utilities

Answer 2

This is a working code, I have tested..

    <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ">.col-md-4</div>
    <div class="col-md-4 visible-lg">.col-md-4</div>
    </div>

Answer 3

Use visiblity classes in bootstrap hidden-phone hidden-tablet based on your requirements

 <div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            <div id="part1" class="col-md-6 hidden-phone">
                <div>
                    xxxx
                </div>
            </div>
            <div id="part2" class="col-md-6">
                <div>
                    yyy
                </div>
            </div>
        </div>
    </div>
</div>