How to responsively group columns automatically in row with Bootstrap

[Chaitanya Vaishampayan]

Consider the following code

<div class="row" id="row1"> <div class="col lg-4 col-md-6" id="col_A">COLUMN CONTENT</div> <div class="col lg-4 col-md-6" id="col_B">COLUMN CONTENT</div> </div> <div class="row" id="row2"> <div class="col lg-4 col-md-6" id="col_C">COLUMN CONTENT</div> <div class="col lg-4 col-md-6" id="col_D">COLUMN CONTENT</div> </div>

Now when we test this code on md screen devices, we can see the output as -

col_A        col_B
col_C        col_D

This is as expected. But if the same code is tested on lg devices then -

col_A        col_B        col_C
col_D

Now, my question is that, in the code I have grouped col_A and col_B in a single row, and same for col_C and col_D. When the code is tested on lg devices, I want to show 3 columns in one line, so in this case there are 3 columns being shown in one line but the problem is that all the 3 columns of a line are not grouped in the same div row. All I want is that for lg devices, col_A col_B col_C must belong to the same div row, but for md devices only col_A and col_B must be in the same div row.

How can I achieve that?

Is there any drawback of the columns being not grouped in the same div row???

I hope the question is clear. If not please tell me I will try to explain it in a bit more detail.

[Bear Bibeault]

The responsive grid of Bootstrap just applies CSS to the elements, it cannot move them around the DOM. If you want to move things around in the DOM, you need to use JavaScript.

But I don't really think that's what you want to do.

Perhaps it would be best to just show us what layouts you want to achieve without trying to predict what the structure should be until the layout is understood.