CODEWITHSUNDEEP
htmlbootstrap-4
Josh
Josh

Reputation: 1429

Bootstrap 4: How to make a column vertically span two other columns in the same row?

I have three columns (A, B, C) within a row. On the default device width (xs) I want the columns to be stacked vertically. From the medium breakpoint and up I want A and C to be stacked vertically and B to be to the right of A but spanning the height of both A and C.

Here is a minimal snippet of code that works for the default case, but not the medium breakpoint and up case:

<div class="container">
  <div class="row mt-5 text-center">
    <div class="col-12 col-md-6" style="background: lightblue"><h1>A</h1></div>
    <div class="col-12 col-md-6" style="background: lightcoral"><h1>B</h1></div>
    <div class="w-100"></div>
    <div class="col-12 col-md-6" style="background: lightgreen"><h1>C</h1></div>
  </div>
</div>

The above code gives the correct result when the device width is less than the medium breakpoint:

enter image description here

But it fails to make B vertically span both A and C:

enter image description here

How do I make B vertically span both A and C?

Upvotes: 1

Views: 382

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6704

I don't think if you can make this layout in bootstrap, but here is an idea. It should solve the problem. You can make 2 columns and show them on different screen size. Depending on a content, you can put it in a separate file and use <?php include '_content.php';?> in those 2 columns or duplicate html.

Here is my idea:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
      	<div class="col-12 bg-primary">A</div>
        <div class="col-12 bg-success d-md-none">B</div>
       	<div class="col-12 bg-danger">C</div>
      </div>
    </div>
    <div class="col-md-6 bg-success d-none d-md-block">B</div>
  </div>
</div>

Upvotes: 1

Related Questions