[RESOLVED] Can't figure out how to get the this grid layout?

[bmckphotos]

I'm trying to learn Bootstrap. The image pictured below is what I am trying to create and can't figure out how to do this. Please help.

[dday9]

Bootstrap uses a 12-column grid system. It looks like you have two columns that take up 1 column each and then the last takes up the remainder. However, as a caveat your first column takes up 4 rows.

You don't want to use Bootstrap for this use case, rather you use a <table> and specify the rowspan attribute (documentation) of cell 1,1. Here is an example:
Markup:

<table border="1">
  <tr>
    <td rowspan="4">1,1</td>
    <td>2,1</td>
    <td>3,1</td>
  </tr>
  <tr>
    <td>2,2</td>
    <td>3,2</td>
  </tr>
  <tr>
    <td>2,3</td>
    <td>3,3</td>
  </tr>
  <tr>
    <td>2,4</td>
    <td>3,4</td>
  </tr>
</table>

Styling

table {
  width: 100%;
}

table tr td:last-of-type {
  width: 100%;
}

Live Demo: https://jsfiddle.net/nbxueh2k/

[bmckphotos]

I wondered about doing that as my first thought because it is pretty simple, however, then I wondered how responsive it would be. Turns out it's pretty responsive!

Thanks for the help!

[dday9]

On its own it isn't responsive, but how would you want it to look on smaller devices? It isn't immediately obvious based on your larger device image.