CODEWITHSUNDEEP
twitter-bootstrap-3
Mark
Mark

Reputation: 2704

Bootstrap 3 mixing col-md-3 and col-sm-4

I have a 3 rows divided into 4 columns for medium devices like this:

<div class="container">
    <div class="row">
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
    </div>
    <div class="row">
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
    </div>
    <div class="row">
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
        <div class="col-md-3">image</div>
    </div>
</div>

How can I make these rows divided into 3 columns for small devices so it would end up in 4 rows with 3 columns ?

Upvotes: 0

Views: 887

Answers (1)

Sean Ryan
Sean Ryan

Reputation: 6056

As I learned recently, you can ditch all but one of those div.rows and everything will still work fine. As long as you are working with factors of 12, as you are (3x4 and 4x3), everything will lay out nicely.

Working example here: http://www.bootply.com/n0fmASOCI1 

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
    <div class="col-md-3 col-sm-4">image</div>
  </div>
</div>

Upvotes: 1

Related Questions