1

I've a problem and i can't figure out how to solve it.
The layout that i want is the following:

+-----------+
|  Desktop  |
+------+----+
|      |BOX1|
|      +----+
| BOX2 |BOX3|
|      +----+
+------+

+--------+
| Mobile |
+--------+
|  BOX1  |
+--------+
|        |
|  BOX2  |
|        |
+--------+
|  BOX3  |
+--------+

The code that i've written is:

<div class="col-12 col-md-5">
<div class="box"></div>
</div>
<div class="col-12 col-md-7 order-md-first">
<div class="box"></div>
</div>
<div class="col-12 col-md-5 offset-md-7">
<div class="box"></div>
</div>

The problem is that the last box3 doesn't go under the box1, instead it align itself at the end of the box2:

+-----------+
|  Desktop  |
+------+----+
|      |BOX1|
|      +----+
| BOX2 |
|      |
+------+----+
       |BOX3|
       +----+

I can't figure out how to do it, i've tried to group BOX1 and BOX3 inside a col but it won't work in mobile this way.

Daniele
  • 11
  • 1
  • bootstrap cannot draw boxes spanning rows (on row direction) or columns (on columns direction) , it is a flex model, not a grid model. try using flex-column , but it will require a fixed height to allow boxes 1 and 3 to wrap to next column. – G-Cyrillus Apr 15 '20 at 08:44
  • here is a possible example of what i mean : https://codepen.io/gc-nomade/pen/pojgJKN see also : https://getbootstrap.com/docs/4.4/utilities/flex/#direction You need a way to set the proper height needed to your content. – G-Cyrillus Apr 15 '20 at 09:05
  • Ok thanks, i'll try that, in my case the height will be all the remaining vertical space – Daniele Apr 15 '20 at 09:22

0 Answers0