1

Initially I wanted to do this layout in bootstrap 4, but now I almost sure that it's impossible without using some hacks like doubling content and then hiding it for mobile/desktop or using javaScript.

For desktop: 

+---+---+
| 1 |   |
+---+   +
| 3 |   |
+---+ 2 +
| 4 |   |
+---+   +
| 5 |   |
+--+----+

For smartphones:

+---+
| 1 |
+---+
| 3 |
+---+
| 2 |
+---+
| 4 |
+---+
| 5 |
+---+

The main problem that I facing with Bootstrap 4 is an equal height of columns, which I don't know what to do with. I can, of course, do it in two nested columns, but then I cannot rearrange order how I want.

In bootstrap 3 I could do it like here in example #9: https://www.bootply.com/siUcTuNhUy But how to do it in bootstrap 4?

Please advise what am I missing.

Volod
  • 1,283
  • 2
  • 15
  • 34

2 Answers2

1

Not sure about the alternatives in Bootstrap, but this can be done using CSS grid.

You can find the codepen with the solution here - https://codepen.io/vishwaovi/pen/RqKaMv?editors=1100

Steps involved:

1. Define the parent containing the elements as a grid.

HTML

<div class="main">
  <div class="section section1"> 1 </div>
  <div class="section section2"> 2 </div>
  <div class="section section3"> 3 </div>
  <div class="section section4"> 4 </div>
  <div class="section section5"> 5 </div>
</div>

CSS

.main {
   display:grid;
   grid-template-columns: 1fr 1fr; // defining a two column grid
}


2. Make section2 to start from column 2 and span for 4 rows

.section2{
  grid-column: 2;
  grid-row: span 4;
}


3. Mobile view: Change the grid to column and make section2 to start in column 1 and row 3

@media (max-width:800px){  
  .main{
    grid-template-columns: 1fr;
  }

  .section2{
    grid-column: 1;
    grid-row: 3 /span 1;
  }
}
vishwaovi
  • 38
  • 6
  • [Bootstrap 4](https://getbootstrap.com/docs/4.0/layout/grid/#grid-options) sets the `md` limit to `768px`. I think - if there are other responsive divs using `sm`/`md`/`lg`/`xl`- it's better to set same sizes. (but It's a personal opinion) – Jean-Marc Zimmer Nov 13 '18 at 10:02
  • Thank you, I was now trying to do something like this, but my version is not looking so promissing. Have only one question. Can I somehow change the order for less then 800 px to be 1 - 3 - 2 - 4 - 5? – Volod Nov 13 '18 at 10:08
  • Again, no idea about bootstrap solutions. But in CSS grid, you can define section2 and section3 grid row to start from row 3 and row 2 respectively – vishwaovi Nov 13 '18 at 10:28
  • 1
    You can check the codepen now. I have made the changes.(Within media query i have defined that section2 should start from row 3) – vishwaovi Nov 13 '18 at 10:49
  • I don't see changes, sorry. Maybe it has some hash in url on the codepan? – Volod Nov 13 '18 at 10:54
  • Found it, grid-row-start: 3; Thank you a lot, you are my saver. – Volod Nov 13 '18 at 11:07
1

Maybe this is useful.

To meet your request for the smartphone layout, I used flexbox (with Bootstrap 4 grid):

.grid .stacked {
  width: 48%
}

.grid .section {
  background: #069;
  margin: 5px auto;
  text-align: center;
  color: #fff;
  WIDTH: 100%;
}

@media (max-width: 575px) {
  .grid .stacked {
    width: 100%
  }
  .stacked .section:nth-child(1) {
    order: 1;
  }
  .stacked .section:nth-child(2) {
    background: #c00;
    order: 3;
  }
  .stacked .section:nth-child(3) {
    order: 2;
  }
  .stacked .section:nth-child(4) {
    order: 4;
  }
  .stacked .section:nth-child(5) {
    order: 5;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="grid d-flex flex-wrap">
    <div class="stacked d-flex flex-column">
      <div class="section col-xs-12">1</div>
      <div class="section col-xs-12 d-block d-sm-none">2</div>
      <div class="section col-xs-12">3</div>
      <div class="section col-xs-12">4</div>
      <div class="section col-xs-12">5</div>
    </div>
    <div class="section col-xs-12 col-sm-6 d-none d-sm-block">2</div>
  </div>
</div>
Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252