What is the correct approach to have different number of columns per row depending on screen size? I have seen a few posts here but they are of older Bootstrap version.
I know that I can simply use all the columns in the same row and it will just wrap content to new lines whenever they pass 12 columns, as per Bootstrap docs:
https://getbootstrap.com/docs/5.2/layout/columns/#column-wrapping :
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.
So if I fetch unknown amount of items from the backend, I can simply do:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
... output more items...
</div>
But is it the correct approach? To put all the items in the same row? Because on the screen these aren't really single rows, there are many rows, depending on the number of items per column. For example, for small screens:
<div class="row">
<div class="col-sm-6 col-xs-6">Item1</div>
<div class="col-sm-6 col-xs-6">Item2</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6">Item3</div>
<div class="col-sm-6 col-xs-6">Item4</div>
</div>
.. more rows ..
In the second approach, I will have to actually change the code to output number of items per row and add new rows depending on the screen size.
Which of the approaches is the correct one? Or another approach?
