When I'm under a certain width, my divs all flow onto each other

Question

Fight CSS today. I have four boxes that have a dynamic element, as they both flip over if the user hangs over them.

I try to make them a little more responsive, and when I reduce the width of the screen to a certain small size, they all sit on top of each other so that I can only see one of them. Ideally, I would like to be divided into two lines, but I had problems with this.

Does anyone have any ideas?

My code is as follows

<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6">
      <div class="threed">
        <div class="item">
          <!-- John Doe
          -->
          <div class="thumb thumb1"></div>
        </div>
        <div class="itemback">
          <div class="item_back_text">
            <h4>John Doe</h4>
            Tattooed snackwave fingerstache, hot chicken typewriter coloring book bicycle rights bitters 
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="threed">
        <div class="item">
          <!-- John Doe
          -->
          <div class="thumb thumb2"></div>
        </div>
        <div class="itemback">
          <div class="item_back_text">
            <h4>John Doe</h4>
            PBR&B jean shorts irony art party. Typewriter glossier seitan kombucha. Art party banh mi skateboard, .
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS looks like

.item, .itemback{
  border-style: solid;
  border-color: black;
}

.thumb {
  width: 100%;
  height: 100%;
}

.thumb1 {
    background: url(image1.jpg);
    background-size: 100%;
}

.thumb2 {
    background: url(image2.jpg);
    background-size: 100%;
}

.itemback{
  opacity: .7;
  position: relative;

  .item_back_text {
    color: white;
    // text-align: center;
    font-size: 12px;
    font-weight: bold;
  }
}

.item{
  text-align: center;
  color: white;
  position: relative;
}

.threed > .item{
  position: absolute;
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
  background: #808080; width: 10em; height: 10em; border-radius: 7px;
  -webkit-backface-visiblity: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.threed > .itemback{
  position: absolute;
  -webkit-transform: perspective( 600px ) rotateY( 180deg );
  transform: perspective( 600px ) rotateY( 180deg );
  background: black; width: 10em; height: 10em; border-radius: 7px;
  -webkit-backface-visiblity: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.threed:hover > .item {
  -webkit-transform: perspective( 600px ) rotateY( -180deg );
  transform: perspective( 600px ) rotateY( -180deg );
}

.threed:hover > .itemback {
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
}

Can anyone understand what I'm doing wrong with this?

Answer 1

divs . .item .item-back , , .

, ~ 2px, .

.threed { min-height: 250px }, , , .

.thumb. div ( <img> <div>). .thumb, <img>.