I'm developing an online platform but I can't seem to get the placement right on three of my div elements. The elements are placed next to each other by default for bigger screens. However, when the screen gets smaller, the elements get cramped up. I would like to be able to place the three boxes beneath each other when the screen gets smaller with an @media query from CSS. I tried changing the position attribute for the divs' class but this didn't work. My current code is as follows:

HTML:

<section>
    <div >
        <div >
          <h3>Block 1</h3>
          <p>Lorem ipsum dolor sit amet</p>
          <button  type="button" name="button">Lees meer</button>
        </div>
        <div  id="middleFrame">
          <h3>Block 2</h3>
          <p>Lorem ipsum dolor sit amet</p>
          <button  type="button" name="button">Lees meer</button>
        </div>
        <div >
          <h3>Block 3</h3>
          <p>Lorem ipsum dolor sit amet</p>
          <button  type="button" name="button">Lees meer</button>
        </div>
    </div>
  </section>

CSS:

.frameItem {
  width: 30%;
  margin-top: 15px;
  padding: 20px 25px 25px 25px;
  background-color: var(--frameBackGround);
  border-radius: 15px;
  box-shadow:
    0px 10px 20px 1px rgba(0,0,0,0.2);
 }

.frameContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 7.5%;
}

#middleFrame {
  margin: 15px 2% 0 2%;
}

Does anyone have an idea how I could get the three boxes beneath each other using the @media query? Which attribute should I manipulate using the media query? All help is most apriciated.

Thanks!

CodePudding user response：

.frameContainer {
   flex-wrap: wrap;
}

Add this and it would work.