Issue with display: flex & column-count: 2

Question

I am trying to create two columns that are a certain width. Both columns have an image and text below the image. I have managed this with:

.quick-links img {
    height: 7.5em;
    width: 7.5em;
    border-radius: 10em;
    margin: 0 15em;
}

.quick-links {
    display: flex;
    justify-content: center;
}

However, whenever the website shrinks down past about a width of 1200px something weird begins to happen:

https://gyazo.com/5f01aa7248873d999dd6552e089b1c2f

This is extremely annoying because what I thought would be something quite simple to make, has turned out to be a nightmare!

I have also tried:

.quick-links img {
    height: 7.5em;
    width: 7.5em;
    border-radius: 10em;
    margin: 0 15em;
}

.quick-links {
    column-count: 2;
    display; inline-block;
}

However, this issue then occurs:

I am very stumped and would love for someone to help me.

For reference, here is the HTML:

<section class="quicklinks">
        <h1>Quicklinks</h1>
        <div class="quick-links">
            <!-- Client Reviews -->
            <figure class="reviews">
                <img src="images/RatingsTick.png" alt="Ratings Tick Image">
                <figcaption class="port-desc">
                    <p><strong>Reviews</strong></p>
                    <p>-Filler Text-</p>
                </figcaption>
            </figure>

            <!-- Portfolio -->
            <figure class="portfolio">
                <img src="images/Portfolio.png" alt="Portfolio Image">
                <figcaption class="port-desc">
                    <p><strong>Previous Work</strong></p>
                    <p>-Filler Text-</p>
                </figcaption>
            </figure>
        </div>

</section>

Answer 1

To allow flex children to wrap you need to set flex-wrap:wrap;.

You may also set a min-width to create a break point almost alike mediaquerie would.

.quick-links {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  text-align: center;
  flex-wrap: wrap;
}

figure {
  min-width:25em;/* or whatever value suits your needs */
  border: solid;/* see me */
}

h1 {
  text-align: center;
}

<section class="quicklinks">
  <h1>Quicklinks</h1>
  <div class="quick-links">
    <!-- Client Reviews -->
    <figure class="reviews">
      <img src="images/RatingsTick.png" alt="Ratings Tick Image">
      <figcaption class="port-desc">
        <p><strong>Reviews</strong></p>
        <p>-Filler Text-</p>
      </figcaption>
    </figure>

    <!-- Portfolio -->
    <figure class="portfolio">
      <img src="images/Portfolio.png" alt="Portfolio Image">
      <figcaption class="port-desc">
        <p><strong>Previous Work</strong></p>
        <p>-Filler Text-</p>
      </figcaption>
    </figure>
  </div>

</section>

About column-count, it can seem usefull but this is a CSS rule that unfortunately remained in the css draft, flex seems much more efficient here.