Bootstrap Design: Should I add more than 12 columns in a row?

Question

I have been using bootstrap for a long time, and I'm starting to think that for sections of things, like inputs, I should put them all in one row and just make the design at different sizes equal 12 where needed. I used to design at the largest, a row per set of 12.

Using this new way I can pull rows up or down into places where other rows are. That is if I have 48 columns that are all together as sizes get smaller I might want to pull some columns that used to be below another one in line with the one above it. If I use rows "properly" I can't do this. Is there a reason to always use new rows? Or should the design be container > row > all my columns?

Thanks!

Edit:

Examples are:

Old way

    <div class="container">
    <div class="row">
        <div class="col-md-6">
            Content
        </div>
        <div class="col-md-6">
            Content
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            Content
        </div>
        <div class="col-md-4">
            Content
        </div>
        <div class="col-md-4">
            Content
        </div>
    </div>
</div>

New way

<div class="container">
    <div class="row">
        <div class="col-md-6">
            Content
        </div>
        <div class="col-md-6">
            Content
        </div>
        <div class="col-md-4">
            Content
        </div>
        <div class="col-md-4">
            Content
        </div>
        <div class="col-md-4">
            Content
        </div>
    </div>
</div>

What I don't understand is, if the new way is preferable, as it is much more flexible, what's the point of having the row at all? Why not just have container serve the same role as row and do it like this?

<div class="container">
    <div class="col-md-6">
        Content
    </div>
    <div class="col-md-6">
        Content
    </div>
    <div class="col-md-4">
        Content
    </div>
    <div class="col-md-4">
        Content
    </div>
    <div class="col-md-4">
        Content
    </div>
</div>

Edit2: This is not the same question as the one suggested. I know I can have more than 12 columns per row. i read that exact thread right before this. I want to know if I should I'm looking for bootstrap design, not bootstrap support. I was looking for drawbacks and advantages of both models, and details as to why you would or would not do it this new way.

If you're going to down vote that answer then look at your title, change it, be more precise & clear in your question. — Peter Girnus, Oct 27 '15 at 19:47
Thats what I do. If my main content has 3 columns, I put them in one row, and I make them all show besides each other on big screens(3x col-md-4), but below each other on small screens. So I do use 3x col-xs-12 inside one row. — turbopipp, Oct 27 '15 at 19:47
@PetrusRex I don't know what you're talking about. There is no answer, I didn't downvote anything. — Z2VvZ3Vp, Oct 27 '15 at 19:55
I deleted the answer because @turbopip that you can indeed use more than 12 columns in the grid system, he's right from the docs, **"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"** — Peter Girnus, Oct 27 '15 at 19:57
Yes, I think that is his point. Using that functionality of wrapping onto a new line intentionally by using only one `.row` — turbopipp, Oct 27 '15 at 20:00
I know I can, I'm looking for reasons I should or shouldn't. That was the actual question. — Z2VvZ3Vp, Oct 27 '15 at 20:57

Bootstrap Design: Should I add more than 12 columns in a row?

0 Answers0