CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
d4rty
d4rty

Reputation: 4188

How to manage mixed column classes in one row - Bootstrap

I am looking for a way to get a specific layout, which is shown in the following illustration:

Desired behaviour of my layout

So far I programmed it like this:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 a">a</div>
    <div class="col-sm-6 col-md-4 b">b</div>
    <div class="col-sm-6 col-md-4 c">c</div>
  </div>  

  <div class="row">
    <div class="col-sm-6 col-md-4 d">d</div>
    <div class="col-sm-6 col-md-4 e">e</div>
    <div class="col-sm-6 col-md-4 f">f</div>
  </div>  
</div>

The above code works for window sizes, which match md(and above) and below sm. But on window sizes, which match to sm, the following happens: undesired behaviour

How can I get my desired layout? I have also created a bootply.

Upvotes: 1

Views: 521

Answers (2)

vanburen
vanburen

Reputation: 21663

Simply use a single row instead of two. See Column Wrapping

Working Example:

.a {
  background-color: green;
}
.b {
  background-color: blue;
}
.c {
  background-color: red;
}
.d {
  background-color: purple;
}
.e {
  background-color: yellow;
}
.f {
  background-color: grey;
}
<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-sm-6 col-md-4 a">a</div>
    <div class="col-sm-6 col-md-4 b">b</div>
    <div class="col-sm-6 col-md-4 c">c</div>
    <div class="col-sm-6 col-md-4 d">d</div>
    <div class="col-sm-6 col-md-4 e">e</div>
    <div class="col-sm-6 col-md-4 f">f</div>
  </div>
</div>

And if you run into an issue with clearing floats due to column height (and the use of a single row), here's how to resolve it.

Working Example:

@media (min-width: 992px) {
  .row-grid .col-md-4:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .row-grid .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row row-grid">

    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/150x150/333/fff?text=A" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/250x250/444/fff?text=B" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/450x550/eee/fff?text=C" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/350x350/f00/fff?text=D" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/350x150/ff0/fff?text=E" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/350x650/000/fff?text=F" class="img-responsive">
    </div>

  </div>
</div>

Upvotes: 1

Damien Boisseau
Damien Boisseau

Reputation: 66

This happens because a,b,c and d,e,f are wrapped in separate .row divs.

Try to put everyone in the same .row : 

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 a">a</div>
    <div class="col-sm-6 col-md-4 b">b</div>
    <div class="col-sm-6 col-md-4 c">c</div>
    <div class="col-sm-6 col-md-4 d">d</div>
    <div class="col-sm-6 col-md-4 e">e</div>
    <div class="col-sm-6 col-md-4 f">f</div>
  </div>  
</div>

Here is the updated bootply

Upvotes: 2

Related Questions