Bootstrap column span 2 rows

Question

I am using Bootstrap 4 and this is what I'm trying to achieve (a picture worth a thousand words):

This is what I managed to achieve, by using this markup:

<div class="col-lg-6">1</div>
<div class="col-lg-6">2</div>
<div class="col-lg-6">3</div> <!-- I want 3 to stick to the bottom of 1 -->

Can any bootstrap expert help me out with this one?

score 5 · Accepted Answer · answered Jan 24 '19 at 02:55

In order to get something similar to the layout you want, you would have to use nested rows and columns, so div 1 & 3 would be on a container which will use 6 columns out of the 12, like this (See in full screen):

.col-lg-6 {
 border: 1px solid red;
 min-height: 200px;
}

.col-lg-12 {
 border: 1px solid blue;
 min-height: 200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-6">1</div>
  <div class="col-lg-6">
    <div class="row">
      <div class="col-lg-12">2</div>
      <div class="col-lg-12">3</div>
    </div>
  </div>
</div>

With Bootstrap you have the option to use the order-* class, which helps you (of course) order the elements in a flex-container in whichever way you want, however this will not work since basically on your first level you only have 2 elements.

The other option you have, which actually works really well for these kind of two-dimensional layouts, is CSS Grid, which is native to CSS and can help you order your elements in any way and allow you to get the layout you need:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-template-areas: 
            "g2 g1"
            "g2 g3"
}

.grid-vertical {
  grid-template-columns: 30%;
  grid-template-areas: 
            "g1"
            "g2"
            "g2"
            "g3"
}

.grid-item {
  border: 1px solid #000;
}

.g1 {
  grid-area: g1;
}

.g2 {
  grid-area: g2
}

.g3 {
  grid-area: g3
}

<div class="grid">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

<div class="grid grid-vertical">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

You can get more information about CSS Grid here. You can also read more on Flexbox (which Bootstrap 4 is based on) here so you have more ways to manipulate Bootstrap's components

Thank you very much for your answer. For the second example, I have the issue of browser support which is why I prefer not to use. For the first example that uses bootstrap (which is great), is there any way to swap rectangle '1' and rectangle '2' for large view and keep them as they are for small view? — yanivps, Jan 24 '19 at 08:55
It's not unfortunately, since technically #1 and #2 are children of different containers, you wouldn't be able to swap their positions (#1 and #3 though, you can swap those without problems), at this point in order to keep using Bootstrap I'd say for this particular type of layout, you would be better off just using classes like `d-*-none` and `d-*-block` to hide and show the sections when you need them /: — IvanS95, Jan 24 '19 at 14:16

Bootstrap column span 2 rows

1 Answers1