Win a copy of Testing JavaScript Applications this week in the HTML Pages with CSS and JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
  • Piet Souris
  • Frits Walraven
  • Carey Brown

How to responsively group columns automatically in row with Bootstrap

Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Consider the following code

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

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.
Posts: 67430
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

    Bookmark Topic Watch Topic
  • New Topic