I have developed a bootstrap 4.1 application. My main goal is to design a group of 6 cards.
For wide screens in landscape mode, I aim to show 2 rows with 3 columns each.
[1] [2] [3]
[4] [5] [6]
However, on narrower screens in portrait mode, I want to display 3 rows with 2 columns where the cards maintain order vertically, like this:
[1] [4]
[2] [5]
[3] [6]
The challenge I'm facing is that the col-* settings are not being followed when the grid is set to column direction, resulting in this layout:
[1]
[2]
[3]
[4]
[5]
[6]
Here's how my HTML markup looks like:
<div class="container">
<div class="row flex-column flex-md-row">
<div class="card col-6 col-md-4">
<h5 class="card-header">Card 1</h5>
<div class="card-body"></div>
</div>
<div class="card col-6 col-md-4">
<h5 class="card-header">Card 2</h5>
<div class="card-body"></div>
</div>
<div class="card col-6 col-md-4">
<h5 class="card-header">Card 3</h5>
<div class="card-body"></div>
</div>
<div class="card col-6 col-md-4">
<h5 class="card-header">Card 4</h5>
<div class="card-body"></div>
</div>
<div class="card col-6 col-md-4">
<h5 class="card-header">Card 5</h5>
<div class="card-body"></div>
</div>
<div class="card col-6 col-md-4">
<h5 class="card-header">Card 6</h5>
<div class="card-body"></div>
</div>
</div>
</div>
To make sure the cards stack into multiple columns at smaller screen sizes, I've used the flex-column class for the row div and switched to flex-row at medium screen widths. This setup works well for wider displays but fails to create the desired layout on narrow screens. Any suggestions for improving this behavior?