Reordering rows in mobile view of grid

[iainhallam]

I'm considering porting a site from Bulma to Bootstrap, and there's one part of this that I can't see a way to do with Bootstrap classes.

At present I have a CSS grid with three columns; each has variable length text, then a button, and finally a photo at the bottom. Because these are in a grid with a separate row for the text, the buttons and photos are aligned on wide enough browsers, no matter how much the content above them changes length. When viewed on mobile, however, the whole columns stack on each other so there's the text, button and photo from one column before the next column's text starts. (The grid has the Bulma classes fixed-grid has-3-cols has-1-cols-mobile, and the button/photo cells have is-row-start-2-tablet to change their ordering above 768px.)

I.e., I have this code ordering (and natural order on mobile):

1 text
...
...
2 button
  photo
3 text
...
4 button
  photo
5 text
...
...
...
6 button
  photo

On a wide enough screen, this is laid out:

1 text    3 text    5 text
...       ...       ...
...                 ...
                    ...
2 button  4 button  6 button
  photo     photo     photo

Has anyone got any thoughts on the best way to achieve this in Bootstrap, please?

[gitsult4n]

bootstrap grid is flexbox so no row-start equivalent

easiest way keep one column per item and push the bottom part down
columns in a row are already equal height so the buttons line up

<div class="row">
  <div class="col-md-4 d-flex flex-column">
    <p>text</p>
    <div class="mt-auto">
      <button class="btn btn-primary">button</button>
      <img src="..." class="img-fluid">
    </div>
  </div>
  <!-- two more identical columns -->
</div>

if you want real separate rows put six columns in mobile order and reorder from md up

<div class="row">
  <div class="col-12 col-md-4 order-md-1">text 1</div>
  <div class="col-12 col-md-4 order-md-4">button + photo 1</div>
  <div class="col-12 col-md-4 order-md-2">text 2</div>
  <div class="col-12 col-md-4 order-md-5">button + photo 2</div>
  <div class="col-12 col-md-4 order-md-3">text 3</div>
  <div class="col-12 col-md-4 order-md-6">button + photo 3</div>
</div>

texts wrap onto the first flex line and buttons onto the second
mobile keeps dom order

first option is less markup and no order bookkeeping