bayman bayman - 5 months ago 11
CSS Question

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:

crop photo

Answer

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>

Comments