Is there any way to use flex wrap to wrap on only one column?

Question

Let's say I have 3 divs...

HTML:

<section class="features">
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
</section>

CSS:

.section {
  display: flex;
  flex-wrap: wrap;
}

So what I want is to make these items wrap on only one column when I reduce my screen size...

The current behavior is like this on medium screen size

I want the behavior to be like this in all other screen sizes

Answer 1

<section class="features">
  <div class="item">
    <h3 class="item-name">Item1</h3>
    <p class="item-desc">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
  <div class="item">
    <h3 class="item-name">Item1</h3>
    <p class="item-desc">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
  <div class="item">
    <h3 class="item-name">Item1</h3>
    <p class="item-desc">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
</section>

CSS - I have used flexbox

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .features {
        display: flex;
        flex-wrap: wrap;
      }
      .features .item {
        /*flex: 0 0 100%;*/ /*remove if you don't want media query*/
        max-width: 384px;/*add if you don't want media query*/
        width: 100%;/*add if you don't want media query*/
        padding: 0 1rem;
        margin-bottom: 1rem;
      }

 /*remove if you don't want media query*/
/*@media (min-width: 768px) {
        .features .item {
          flex: 0 0 33.33%;
        }
      }*/