@Focus是对的，使用[responsive utility classes][3]是不可能的，但是我设法解决了这个问题http://bootply.com/81230
CSS

@media (max-width: 768px) {
    .hidebtn-xs, .hidebtn-xs input {
        display: block !important;
    }
    .hidebtn-xs .input-group-btn {
        display: none !important;
    }
}

HTML语言

<div class="input-group hidebtn-xs">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div><!-- /btn-group --> 
    </div><!-- /input-group -->

遗憾的是，Bootstrap 3不支持在table-* 元素上使用响应实用程序类：
响应实用程序当前仅可用于块和表切换。当前不支持用于内联和表元素。
.hidden-*类在display: block;和display: none之间切换元素，这会破坏您的布局，因为.input-group和.input-btn-group使用表格显示值。我不确定是否有解决方法。