CODEWITHSUNDEEP
twitter-bootstrap
John Lee
John Lee

Reputation: 1387

Bootstrap - two (multiple) column stacking for different widths

I have a bootstrap grid with 4 columns. I was wanting to have columns 1-2 and 3-4 stack when the display size was tablet. When the display size was phone, I wanted all 4 columns to stack. But for any large sizes, the columns would not stack.

Would there be an easy way to make this happen in bootstrap? Here is a code example of the 4 columns:

<div class="row">
    <fieldset class="form-group col-sm-3">
        <label for="a1">work phone</label>
        <input id="a1" type="text" class="form-control" readonly="readonly">
    </fieldset>
    <fieldset class="form-group col-sm-3">
        <label for="a2">location</label>
        <input id="a2" type="text" class="form-control" readonly="readonly">
    </fieldset>
    <fieldset class="form-group col-sm-3">
        <label for="a3">contractor</label>
        <input id="a3" type="text" class="form-control" readonly="readonly">
    </fieldset>
    <fieldset class="form-group col-sm-3">
        <label for="a4">job code description</label>
        <input id="a4" type="text" class="form-control" readonly="readonly">
    </fieldset>
</div>

Upvotes: 0

Views: 102

Answers (1)

vanburen
vanburen

Reputation: 21663

If you want the 1st and 2nd then 3rd and 4th over one another you'll probably need to nest your columns/rows and also add another column size for another viewport. See Nesting and Mixed Columns

See working example Snippet.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a1">work phone</label>
          <input id="a1" type="text" class="form-control" readonly="readonly">
        </fieldset>
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a2">location</label>
          <input id="a2" type="text" class="form-control" readonly="readonly">
        </fieldset>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a3">contractor</label>
          <input id="a3" type="text" class="form-control" readonly="readonly">
        </fieldset>
        <fieldset class="form-group col-lg-6 col-md-12">
          <label for="a4">job code description</label>
          <input id="a4" type="text" class="form-control" readonly="readonly">
        </fieldset>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions