web page breaks at 767px, 991px, 1199px using bootstrap 3

i'm working on a project where my web page breaks at 767px, 991px and 1199px and i don't know why this happens. i'm using bootstrap 3.3.7 and where ever i use hidden-* classed in my project where there is an image at the middle and there are two other columns at the right and left, i face this issue. now i don't know if it's because of hidden-* classes or putting an image at the middle column. if you didn't get what i mean, take a look at these codes:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

<div id="#id">
    <div class="container-fluid">
        <div class="row">
            <div class="section-2">
                <div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
                    <ul>
                        <li class="fade-in-skills slide-in-skills">text</li>
                        <li class="fade-in-skills slide-in-skills">text</li>
                    </ul>
                </div>
                <div id="logo-header" class="col-lg-2 hidden-md hidden-sm hidden-xs">
                    <img src="MyImageSrc" width="320" height="600">
                </div>
                <div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
                    <ul>
                        <li class="fade-in-skills slide-in-skills">text</li>
                        <li class="fade-in-skills slide-in-skills">text</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

my css:

#id{
    background: rgba(168, 198, 222, .2);
    margin: 100px 50px 0;
    border-radius: 300px 15px 300px 15px;
    padding: 20px;
}

.section-2 ul {
    list-style: none;
    text-align: center;
}

.section-2 ul li {
    margin: 50px auto 0;
    opacity: 0;
    font-size: 1.6rem;
}

.section-2-right, .section-2-left ul li:last-child {
    margin-bottom: 50px;
}
.section-2 img{
    margin: 50px auto;
    display: block;
}

keep in mind this only happens at those specific pixels mentioned above. there is no issue at 768px or 766px for example and so on... which is very strange for me. i appreciate any help.

The reason why it wasn't working properly was due to using hidden-* Bootstrap-3 predefined classes in my project.

So I decided to remove them and instead of that use CSS Media Queries which doesn't have any side effect unlike buggy, risky Bootstrap classes and their grid system which might be a big trouble at some points just like this case.

So in the end my codes changed from what you see above to this:

@media (max-width: 265px) {
    #logo-header {
        display: none;
    }
}

Keep in mind that we don't need those hidden-* classes anymore.

This way you can actually choose at what screen size your layout should change and you have more freedome and also you won't face this issue. Just use CSS Media Queries and everything will be fine.