Bootstrap stacking columns

Question

I have a silly bootstrap problem.

Problem visualized

code:

<div class="row">
  <div class="col-sm-4" style="background-color:pink;"> lorem... </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... </div>
  <div class="col-sm-4" style="background-color:pink;"> lorem... </div>
</div>

I would like to fit last pink div into space above it. Whats the easiest way to reach my goal?

score 0 · Answer 1 · answered Aug 03 '17 at 14:04

<div class="row">
  <div class="col-sm4">
      <div class="row">
          <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
          <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
      </div>
  </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... </div>
</div>

score 0 · Answer 2 · answered Aug 03 '17 at 14:04

Set 2 columns like this:

<div class="row">
  <div class="col-sm-4">
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
  </div>

  <div class="col-sm-8">
       <div class="col-sm-12" style="background-color:yellow;"> lorem... </div>
  </div>
</div>

So you have 2 columns now:

one of 4 cols and another of 8 cols
every child has 12 cols to take the maximal width of the parent (4 or 8 cols)

score 0 · Answer 3 · answered Aug 03 '17 at 14:05

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


<div class="row">
  <div class="col-sm-4" style="background-color:pink;">
    <div class="row">lorem... top</div>
    <div class="row">lorem... bottom</div>
  </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... Yellow</div>

</div>

hope it helps

Bootstrap stacking columns

3 Answers3