Q:

Bootstrap: How to stack two columns on top of two other columns on small screens?

I have a form layout with 4 columns that stacks on small or xs screens with 100% width.
Is there a way to only stack 2 columns on top of the other two on small or xs? 
Ideally, I'd like to show Column 1 and Column 2 in a row and Column 3 and Column 4 on the row below it on xs/small but all in the same row on medium/large.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form role="search" method="GET" action="/search/">
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="first-name">Column 1:</label>
    <input type="text" class="form-control" placeholder="Column 1" name="fist_name" id="first_name" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="last-name">Column 2:</label>
    <input type="text" class="form-control" placeholder="Column 2" name="last_name" id="title-search" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="city-search">Column 3:</label>
    <input type="text" class="form-control" placeholder="Column 3" name="city" id="city-search" value="">
  </div>
  <div class="form-group form-group-sm  col-xs-6 col-sm-3">
    <label for="city-search">Column 4:</label>
    <input type="text" class="form-control" placeholder="Column 4" name="state" id="state-search" value="">
  </div>
  <div class="input-group-btn">
    <button class="btn btn-default btn-sm" type="submit"><i class="glyphicon glyphicon-search"></i>
    </button>
  </div>
</form>

jsfiddle
Ideal layout on small screen:

A:

You need to add class for extra small devices XS in this case col-xs-6
Take a look at Boostrap Docs to know which class to use in each breakpoint

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form role="search" method="GET" action="/search/">
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="first-name">Column 1:</label>
    <input type="text" class="form-control" placeholder="Column 1" name="fist_name" id="first_name" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="last-name">Column 2:</label>
    <input type="text" class="form-control" placeholder="Column 2" name="last_name" id="title-search" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="city-search">Column 3:</label>
    <input type="text" class="form-control" placeholder="Column 3" name="city" id="city-search" value="">
  </div>
  <div class="form-group form-group-sm  col-xs-6 col-sm-3">
    <label for="city-search">Column 4:</label>
    <input type="text" class="form-control" placeholder="Column 4" name="state" id="state-search" value="">
  </div>
  <div class="input-group-btn">
    <button class="btn btn-default btn-sm" type="submit"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</form>

