JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <h2>Form</h2>

    <form class="form-horizontal" method="post">
        <div class="form-group hidden-xs">
            <label for="range1" class="col-sm-2 control-label">111:</label>
            <div class="col-sm-3">
                <input id="range1" type="text" class="form-control" value="1"/>
            </div>
        </div>

        <div class="form-group hidden-sm hidden-md hidden-lg">
            <label for="range2" class="col-sm-2 control-label">222:</label>
            <div class="col-sm-3">
                <input id="range2" type="text" class="form-control" value="1"/>
            </div>
        </div>
    </form>

</div>

CSS

@media (min-width: 768px) {
    .sm-view {
        display: none;
    }
}

@media (max-width: 767px) {
    .lg-view {
        display: none;
    }
}