title: Bootstrap - Wrapping Columns Around Larger Column
body: <p>I know how to do standard columns and such in Bootstrap. However, I have something I haven't encountered yet and I can't seem to Google the answer. Maybe I don't know what to call it, hence why I can't find it.</p>
  
  <p>I have essentially a bunch of boxes, with one large box on the right, and more of the smaller boxes under it. I think I am confused because normally I would have a row, with 4 columns 3 wide, but the larger column needs to take up multiple rows..</p>
  
  <p>Here is a quick example I made in paint:</p>
  
  <p><img src="https://i.stack.imgur.com/Z2kWL.png" alt="Bootstrap column wrap larger column"></p>
  
  <p>The smaller boxes are kind of like thumbnails for a portfolio, they are all the same size. The larger box is a Twitter news feed, which is a div Twitter provides to place a newsfeed on your site.</p>
  
  <p>I am not sure if I should create two sections (top half and bottom half) or how to approach this. I thought about making the top section 2 columns, then in the 1st have it split into two more (6 and 6). Then do a separate section below it as normal.</p>
  
  <p>However, you can easily add an image into a paragraph and have the text wrap around the image. I am wanting the same thing, only with the Twitter newsfeed and columns..</p>
  
  <p>I can add code once I get an approach if I am still stuck.</p>
  
  <p>I tried to put another set of rows and cols inside my 1st column, but it broke the spacing between the columns which would mean adding CSS to fix the spacing.</p>
  
  <p>Hoping someone has done something like this, or can see by my image, how to approach this.</p>