I am trying to understand and learn about flexboxes and I seem to be doing it the hard way or my code needs some cleaning up. Below is the HTML and CSS. Is there a way to write less code? I feel like I have too many classes and there's an easier way. The instructions for the boxes are attached.

[Instructions #1](https://i.stack.imgur.com/EaEf6.png)
[Instructions #2](https://i.stack.imgur.com/4D95k.png)

```css
/* Mateling GD430 Week 3 Flexbox*/

/*Change font family*/

body {
  font-family: 'Roboto', sans-serif;
}

/*Add margin to bottom of each box*/

section {
  margin-bottom: 50px;
}

/* FLEXBOX ONE*/

#number-1 {
  display: flex;
}

/*Box 1 Styles*/

.container-1>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
  width: 500px;
}

/*Box 2 Styles*/

.container-2>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 500px;
}

/*Box 3 Styles*/

.container-3>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 500px;
}

/* FLEXBOX TWO*/

#number-2 {
  display: flex;
}

/*Box 4 Styles*/

.container-4>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
  width: 500px;
  height: 90%;
}

/*Box 5 Styles*/

.container-5>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 500px;
  height: 90%;
}

/*Box 6 Styles*/

.container-6>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 500px;
  height: 90%;
}

/* FLEXBOX THREE*/

#number-3 {
  display: flex;
  align-items: flex-end;
}

/*Box 7 Styles*/

.container-7>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
}

/*Box 8 Styles*/

.container-8>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 300px;
}

/*Box 9 Styles*/

.container-9>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 900px;
}

/* FLEXBOX FOUR*/

#number-4 {
  display: flex;
  flex-direction: row-reverse;
}

/*Box 10 Styles*/

.container-10>div {
  padding: 10px;
  background-color: #707070;
  border: 1px solid #555;
}

/*Box 11 Styles*/

.container-11>div {
  padding: 10px;
  background-color: #B0B0B0;
  border: 1px solid #555;
  width: 300px;
}

/*Box 12 Styles*/

.container-12>div {
  padding: 10px;
  background-color: #E0E0E0;
  border: 1px solid #555;
  width: 900px;
}
```

```html
<!DOCTYPE html>
<!--Abby Mateling GD430 Week 3 Flexbox -->
<!-- 9/11/2018 -->

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mateling | GD430 | Week 3 | Flexbox</title>

  <!-- Add custom style sheet file -->
  <link rel="stylesheet" href="./css/style.css" type="text/css">

  <!-- Add Roboto Typeface -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

</head>

<body>
  <!-- FLEXBOX ONE-->
  <section id="number-1">
    <!-- Box 1 -->
    <div class="container-1">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>

    <!-- Box 2 -->
    <div class="container-2">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>

    <!-- Box 3 -->
    <div class="container-3">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>

  <!-- FLEXBOX TWO-->
  <section id="number-2">
    <!-- Box 4 -->
    <div class="container-4">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>

    <!-- Box 5 -->
    <div class="container-5">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>

    <!-- Box 6 -->
    <div class="container-6">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>

  <!-- FLEXBOX THREE-->
  <section id="number-3">
    <!-- Box 7 -->
    <div class="container-7">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>

    <!-- Box 8-->
    <div class="container-8">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>

    <!-- Box 9 -->
    <div class="container-9">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>

  <!-- FLEXBOX FOUR-->
  <section id="number-4">
    <!-- Box 10 -->
    <div class="container-10">
      <div>
        <h4>This is Box 1</h4>
        <p>What's a box without type?</p>
      </div>
    </div>

    <!-- Box 11-->
    <div class="container-11">
      <div>
        <h4>This is Box 2</h4>
        <p>This box has more content that the other two. A bit of an over-achiever, if you ask me.</p>
      </div>
    </div>

    <!-- Box 12 -->
    <div class="container-12">
      <div>
        <h4>This is Box 3</h4>
        <p>This box has just a bit more type than Box 1.</p>
      </div>
    </div>

  </section>

</body>

</html>
```