1

I wonder how to obtain the following layout.

On medium and large devices I'd like to have a 2 rows and 2 columns layout (2 x 2 matrix).

On small (and extra small) devices or when resizing to small, I'd like to have a 4 rows and one column matrix.

I'll illustrate it via ascii.

1) 2 x 2 matrix (medium and large):

(b1)    (b2)
____________

r1c1    r1c2
r2c1    r2c2

2) 4 x 1 matrix (small and extra small):

(b1)
r1c1
r2c1
(b2)
r1c2
r2c2

The important thing here is, the block wise merging of columns and rows when resizing to small. A block in this case is made out of two rows per one column. This is indicated by (b1), (b2).

This kind of logic shall be expandable to multiple rows and columns.

I might be barking up the wrong tree.

In general I'd like to grid-align text below images. In a block the first row is always the image, the second row is always the justified text.

So how to overcome this?

woodz
  • 737
  • 6
  • 13

1 Answers1

1

If I understood your question correctly, the easiest solution is to add order class for each column. Check out the snippet below on different sizes, pc and mobile and see the difference in layout and order.

EDIT: I added margins on small screen as you requested.

/*DEMO PURPOSE*/.col-md-6{border:1px red solid;padding:2rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<section class="container-fluid">
  <div class="row">
    <div class="col-md-6 order-1 order-md-1">Row 1 Col 1</div>
    <div class="col-md-6 order-3 order-md-2">Row 1 Col 2</div>
    <div class="col-md-6 order-2 order-md-3 mb-3 mb-md-0">Row 2 Col 1</div>
    <div class="col-md-6 order-4 order-md-4">Row 2 Col 2</div>
  </div>
</section>
Jakub Muda
  • 6,008
  • 10
  • 37
  • 56
  • I am pretty much excited. This explains ordering much more than on the original bootstrap doc. This should be added to their doc. They lack a sample for breakpoint based reordering. – woodz Feb 05 '19 at 13:10
  • 1
    I just aplied the logic to my site and it works like a charm. May I ask you for another little tweak? When it comes to one column (4 rows), how can I dynamically put a bit of space between the two blocks (Row 2 Col 1 | | Row 1 Col 2)? Would mt-* be an option here? – woodz Feb 05 '19 at 20:27
  • It seems mt-* moves horizontally instead of vertically – woodz Feb 05 '19 at 20:34
  • 1
    You should add `mb-* mb-md-0` class to Row 2 Col 1 and you will have a margin only on small screens. – Jakub Muda Feb 05 '19 at 21:19
  • awesomely perfect – woodz Feb 05 '19 at 23:16