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

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>