How to make a div width responsive?

I have the following style:

.center-box {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

And the following HTML:

<div class="center-box" style="background-color: lightgoldenrodyellow;">
    <div class="d-flex" style="background-color: lightcyan;">
        <i class="far fa-info-circle fa-3x"></i>
    </div>
    <div class="d-flex pt-2" style="background-color: lightgreen;">
        <div class="h4">Caption comes here</div>
    </div>
    <div class="d-flex pt-2" style="max-width: 25%; background-color: lightcoral;">
        <div class="row">
            <div class="col-12">
                Some long description text comes here. It can be multiple lines and should provide enough information to the user.
            </div>
            <div class="col-12">
                <div class="float-left pt-4">
                    Options:
                    <ul>
                        <li>Option 1</li>
                        <li>Option 2</li>
                        <li>Option 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

And the result is on desktop is this:

However, on mobile it looks like this:

Is there a cleaner way to make the width responsive? Do I need to use media breakpoints?

Bootstrap includes responsive styling via its grid system, which you are already using, but you're not yet taking advantage of breakpoints. With breakpoints, you can set a certain number of columns based on different screen sizes. For example on a mobile device you would want to use the full width, or 12 columns, but on large desktop screens maybe only use 8 columns, which would take up 66.66% of the space. You would accomplish that using these specific classes:

<div class="col-12 col-lg-8">

Behind the scenes, these classes are setting the relevant media queries for you, which you can see when you inspect the DOM:

@media (min-width: 992px) {
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

Here is how I would edit your code to take advantage of Bootstrap's responsive grid classes.

<div class="container center-box" style="background-color: lightgoldenrodyellow;">
  <div class="row" style="background-color: lightcyan;">
    <i class="far fa-info-circle fa-3x"></i>
  </div>
  <div class="row pt-2" style="background-color: lightgreen;">
    <div class="h4">Caption comes here</div>
  </div>
  <div class="row pt-2 justify-content-center">
    <div class="col-12 col-lg-8" style="background-color: lightcoral;">
      <div>
        Some long description text comes here. It can be multiple lines and should provide enough information to the user.
      </div>
      <div class="float-left pt-4">
        Options:
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Some corrections were needed. Bootstrap grids should always follow the pattern of container -> rows -> columns, so some other classes had to be moved around. Another important change was removing the max-width: 25%; on the lightcoral div, as it was preventing its width from being properly responsive.

Codepen demo