how to split data in columns using bootstrap

Question

The following example would create a 4 columns layout on xl, 3 on lg, 2 on sm en default 1 column:

<div class="row">

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">A</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">B</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">C</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">D</div>

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">E</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">F</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">G</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">H</div>

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">I</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">J</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">K</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">L</div>

</div>

This works fine, but my data is shown alphabetically from left to right:

ABCD
EFGH
IJKL

But I'd like ABC to be in the first colum, DEF in the second, GHI in the third, and JKL in the fourth... in other words alphabetically from top to bottom spread out across the columns depending on the screen:

ADGJ
BEHK
CFIL

AEI
BFJ
CGK
DHL

AG
BH
CI
DJ
EL
FL

A
B
C
D
E
F
G
H
I
J
K
L

My first though was looping through the data and create "row" for each screensize and use the display method to show it on the corresponding screen, but there has to be a better way?

@Nikkkshit mind an example? And I’m working from a database, so the data is always different. — vespino, Jan 19 '23 at 16:57
can we consider data coming from the database as an array, like ```[A,B,C,..]```.? — Nexo, Jan 19 '23 at 17:05
What do you mean by while loop? could you please explain it? — Nexo, Jan 19 '23 at 17:08
The data’s coming from a MySQL database, so I first do a select query and then loop the results using while. Oh, it’s all PHP. But if you have a example of the HTML, that’s already much appreciated! — vespino, Jan 19 '23 at 17:14
Does this answer your question? [How to reorder bootstrap columns vertically](https://stackoverflow.com/questions/47186788/how-to-reorder-bootstrap-columns-vertically) — isherwood, Jan 20 '23 at 14:18
Or this? [How to order a grid vertically in Bootstrap](https://stackoverflow.com/questions/72911315/how-to-order-a-grid-vertically-in-bootstrap) — isherwood, Jan 20 '23 at 14:19

score 0 · Answer 1 · answered Jan 21 '23 at 08:46

Thanks to @isherwood for replying with this post: How to order a grid vertically in Bootstrap

//css

.column-order {
  --count: 3;
  column-count: var(--count);
  column-gap: 0;
}

.column-order>div {
  width: 100%;
}

@media screen and (max-width: 992px) {
  .column-order {
    --count: 2;
  }
}

@media screen and (max-width: 576px) {
  .column-order {
    --count: 1;
  }
}

//html

<div class="column-order">
  <div class="col border">Field1</div>
  <div class="col border">Field2</div>
  <div class="col border">Field3</div>
  <div class="col border">Field4</div>
  <div class="col border">Field5</div>
  <div class="col border">Field6</div>
  <div class="col border">Field7</div>
  <div class="col border">Field8</div>
  <div class="col border">Field9</div>
  <div class="col border">Field10</div>
  <div class="col border">Field11</div>
</div>

While this does work, I'm facing one problem. In my HTML I added "py-1" to each div to give the contents some room. On iPad however this looks like this:

Resizing my browser screen does not show this issue. It's as if the padding works through to the next "column"?

how to split data in columns using bootstrap

1 Answers1