-1

What I am trying to achieve is this: 1 long left column- and next to it, 2 rows on the right, that together - align up to the left column. In a table it would super easy to do:

----------------------------
|         |                |
|   col-4 |     col-8      |
|         |                |
|         |________________|
|         |                |
|         |                |
|         |      col-8     |
|         |                |
----------------------------

My code looks like this, but its only half way there: I cant get the second row col-8 to move up to its twin (other than some kind of custom made double row with a negative margin-top). 

<div class="row d-flex flex-row-reverse">
  <div class="col-sm-8 align-self-start">888</div>
  <div class="col-sm-4" style="height: 400px;">444</div>
  <div class="col-sm-8 ">888</div>
</div>

JSFIDDLE

Thank you.

kneidels
  • 956
  • 6
  • 29
  • 55

2 Answers2

1

If you are using the normal markup tree of container, row, col you can just put your tall col-sm-4 first followed by a col-sm-8 and add the class of d-flex flex-column to the col-sm-8 and then inside of the col-sm-8 you can have 2 divs with the class of col and they will fill the area of their parent so your markup would look like the following:

<div class="container">
  <div class="row">
    <div class="col-sm-4" style="height:400px;">Regular col-sm-4</div>
    <div class="col-sm-8 d-flex flex-column p-0">
      <div class="col">Flex item inside col-sm-8</div>
      <div class="col">Flex item inside col-sm-8</div>
    </div>
  </div>
</div>

If your not using bootstraps markup tree then you will have to initiate the flex behavior on the outside div like so:

<div class="d-flex">
  <div class="col-sm-4" style="height:400px;">Regular col-sm-4</div>
  <div class="col-sm-8 d-flex flex-column p-0">
    <div class="col">Flex item inside col-sm-8</div>
    <div class="col">Flex item inside col-sm-8</div>
  </div>
</div>

So how this works is bootstrap's rows use the flex behavior already to create their grid so they already have the display:flex in the row's css and by adding the .col class inside of your d-flex flex-column you are initiating the flex behavior on your .col-sm-8 and the .col class has flex-grow: 1;` in the css already so your child containers of your flex column will fill the height.

Hope that makes sense here is an updated fiddle Fiddle Demo

Note: You will probably want to add the class of p-0 to the flex-column to eliminate the columns padding like I have done in the above examples

Steve K
  • 8,505
  • 2
  • 20
  • 35
  • Thank you @steve-k! Question: this does not seem to work when the 2 rows on the right need to be different heights, right? – kneidels Sep 19 '17 at 13:54
  • 1
    You can just remove the .col class from one of the right columns don't think it matters which one and maybe give it the class of px-3 so it has the same padding as the .col then the remaining .col will just fill the extra room in the flex column. Does that make sense? – Steve K Sep 19 '17 at 20:01
0

What kind of browser support do you need for this? One possible attack would be using CSS Grid. Grid is relatively well supported, and getting better all the time.

Bricky
  • 2,572
  • 14
  • 30