禁用类但不禁用较小设备上的内容

Question

我有一个词缀侧边栏，当我从较小的屏幕打开页面时我隐藏，但当我添加主要内容时，它隐藏在侧边栏后面，所以我添加margin-left：200px;在内容上现在它在更大的屏幕上正常工作，但当我从较小的屏幕打开页面时，我得到了非常薄的内容

这是我的侧栏

    <div class="main-nav">
<div class="row">
<div class="hidden-xs visible-sm visible-md visible-lg">
    <div class="col-md-2 affix">
        <div class="list-group">
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-dollar"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-users"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-dashboard"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-unlock"> </i> Lorem Ipsum</a>
        </div>
    </div>
</div>
</div>

css

.main-nav {
margin-left: 10px;
margin-right: 10px;

}

这是我主要内容的一部分

pastebin com 7mxAzDTi

css

.main-content {
margin-left: 220px;
margin-right: 10px;
min-height: 800px;

}