Bootstrap: Avoiding vertical gap between cells caused by cells in other rows

Question

I am using Bootstrap with a two-column layout for large screen sizes. For smaller screens, there is only one column.

I would like to have the main content in the left-hand column, and illustrations and such in the right-hand column. To make sure that the illustrations are positioned correctly on smaller screens, I must separate the content in the left-hand column into different cells, so that the content in the right-hand column can be positioned between them, like this:

<div class="container">
  <div class="row">
     <div class="col-xs-12 col-md-6">
        The first text on the page.
     </div>
     <div class="col-xs-12 col-md-6">
        <img src="illustration.jpg" alt="">
     </div>
     <div class="col-xs-12 col-md-6">
        The text continues here.
     </div>
  </div>
</div>

Now, if the image in the right-hand column is quite tall, there will be a gap between the cells in the first column, like this:

+--------------------++--------------------+
| some text that     ||     █▒▒███         |
| is placed in this  ||   ███████████      |
| column             ||  ██   ████████     |
+--------------------+|  █ ▄█▄ ████████    |
                      |  █ ▀█▀ █████████   |
                      |  ██   ███████████  |
                      |   █████████▓▓▓▓██  |
                      |     ███████▓▓▓▓██  |
                      |     ███████▓▓▓▓█   |
                      |     ███████▓▓▄▀    |
                      |     ███████▄▀      |
                      |   █████████        |
                      |  ██   █████        |
                      |  █ ▄█▄ ████        |
                      |  █ ▀█▀ ████        |
                      |  ██   ████▀        |
                      |   ███████▀         |
                      |     █▒▒█▀          |
                      +--------------------+
+--------------------+
| i would prefer     |
| this text to       |
| follow directly    |
| after the text     |
| above, and avoid   |
| the vertical space |
| caused by the tall |
| image in the right |
| hand column        |
+--------------------+

On smaller screens it looks like it should, with the car placed between the texts:

+--------------------+
| some text that     |
| is placed in this  |
| column             |
+--------------------+
+--------------------+
|     █▒▒███         |
|   ███████████      |
|  ██   ████████     |
|  █ ▄█▄ ████████    |
|  █ ▀█▀ █████████   |
|  ██   ███████████  |
|   █████████▓▓▓▓██  |
|     ███████▓▓▓▓██  |
|     ███████▓▓▓▓█   |
|     ███████▓▓▄▀    |
|     ███████▄▀      |
|   █████████        |
|  ██   █████        |
|  █ ▄█▄ ████        |
|  █ ▀█▀ ████        |
|  ██   ████▀        |
|   ███████▀         |
|     █▒▒█▀          |
+--------------------+
+--------------------+
| i would prefer     |
| this text to       |
| follow directly    |
| after the text     |
| above, and avoid   |
| the vertical space |
| caused by the tall |
| image in the right |
| hand column        |
+--------------------+

But how can I make it look something like this on larger screens?

+--------------------++--------------------+
| some text that     ||     █▒▒███         |
| is placed in this  ||   ███████████      |
| column             ||  ██   ████████     |
+--------------------+|  █ ▄█▄ ████████    |
+--------------------+|  █ ▀█▀ █████████   |
| i would prefer     ||  ██   ███████████  |
| this text to       ||   █████████▓▓▓▓██  |
| follow directly    ||     ███████▓▓▓▓██  |
| after the text     ||     ███████▓▓▓▓█   |
| above, and avoid   ||     ███████▓▓▄▀    |
| the vertical space ||     ███████▄▀      |
| caused by the tall ||   █████████        |
| image in the right ||  ██   █████        |
| hand column        ||  █ ▄█▄ ████        |
+--------------------+|  █ ▀█▀ ████        |
                      |  ██   ████▀        |
                      |   ███████▀         |
                      |     █▒▒█▀          |
                      +--------------------+

I'm using Bootstrap 3, but a solution for Bootstrap 4 would also be interesting. — Magnar Myrtveit, May 29 '17 at 14:30

score 0 · Answer 1 · answered May 29 '17 at 14:42

One solution would be to use column to make the desktop layout, and a flex column on mobile that uses order to re-order the elements.

.special {
  columns: 2;
}
.special > div {
  display: inline-block;
  margin: 0 0 1em;
}

@media (max-width: 600px) {
  .special {
    display: flex;
    flex-direction: column;
  }
  .special > div:nth-child(1), .special > div:nth-child(3) {
    order: -1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row special">
    <div>The first text on the page. The first text on the page. The first text on the page. The first text on the page. The first text on the page. The first text on the page.</div>
    <div>The text continues here. The text continues here. The text continues here. The text continues here. The text continues here. The text continues here. The text continues here. The text continues here.</div>
    <div>
      <img src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" style="max-width: 100%">
    </div>
  </div>
</div>

Bootstrap: Avoiding vertical gap between cells caused by cells in other rows

1 Answers1