Grid layout for Bootstrap

Question

I'm having a hard time styling my columns in a certain way. I have 2 rows containing 2 columns each of the same size.

A B C D

I'm supposed to add a longer column that encompasses both rows next to it.

A B E C D E

With E having the equal length of both rows. I tried separating two divs and floating each to its corresponding sides to no avail. My code:

.announcements{
	width: 300px;
	height: 500px;
	background: #FFFFFF;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08);
	float: right;
}

.btn-links{
	width: 300px;
	height: 160px;
	background: #FFFFFF;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08);
	border-radius: 5px;
}

<div class="container-fluid bg-content">
      <div class="content">
        <div class="content-heading">
          <h1> Welcome, </h1> <!--Name of user-->
          <h4> What do you want to do today? </h4>
        </div>
        <div class="quick-links">
          <div class="row">
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
            <div class="panel announcements">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
            <div class="col-md-4">
              <button class="btn-links"></button>
            </div>
          </div>
        </div>
      </div>
    </div>

However, this code produces:

ABCD being rectangle boxes, E being the long column on the right. How can I fix this that we can put more rectangle boxes on the left side and the right panel stays floating on the side? Thanks in advance.

Answer 1

What you want is the following, and you can check it out at this fiddle, but make sure that the window is big enough that the 4/12 of md size fits on the right otherwise responsiveness will cause it to fall bellow. If you want to make it so that it stays on the right for smaller sizes, you would want to replace col-md... with col-sm... or add the col-sm...

<div class="container-fluid bg-content">
  <div class="content">
    <div class="content-heading">
      <h1> Welcome, </h1> <!--Name of user-->
      <h4> What do you want to do today? </h4>
    </div>
    <div class="quick-links">
      <div class="row">
        <div class="col-md-8">
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
          <div class="col-md-6">
            <button class="btn-links"></button>
          </div>
        </div>
        <div class="col-md-4 panel announcements">
        hello there
        </div>
      </div>
    </div>
  </div>
</div>

You go from the outside in. First you have a row that contains the whole thing with one div being 8/12 of the row, and the other div in it being 4/12 for the panel announcements. Then, within the first 8/12 div you have two rows, each having two divs with each having 6/12 of that space.