How do I stop columns from stacking as I resize screen?

Question

I am trying to create the appearance of two columns of flash cards next to each other and I'm able to create this appearance on my laptop with the browser taking up the full screen (or most of the screen) but once I start making the browser's width smaller my flash cards stack on top of each other. I've tried creating two classes for each column and floating them and I've even tried using bootstrap's grid system with no luck. Here is my recent attempt:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">

  <label>
  <input type="checkbox"  />
  <div class="card">
      <div class="front">
        <table>
          <tr>
            <td>
              <img src="https://www.tampabay.com/resources/images/dti/rendered/2013/08/pt_278041_CODD_sextuplets_1_11398051_8col.jpg" alt="no">
            </td>
          </tr>
          <tr id="bottom">
            <td>Failure of family planning</td>
          </tr>
        </table>
    </div>
    <div class="back">
      <table>
        <tr>
          <td> Z37.54: Sextuplets, all liveborn </td>
        </tr>
      </table>
    </div>
  </div>
  </label>
</div>
  <div class="col-sm-6">

  <label>
  <input type="checkbox"  />
  <div class="card">
      <div class="front">
        <table>
          <tr>
            <td>
              <img src="http://static.igre123.com/slike/28899-68381/turtle-attack!!!-*-*.jpg" alt="no">
            </td>
          </tr>
          <tr id="bottom">
            <td>Teenage Mutant Ninja Turtles attack Bebop and Rocksteady</td>
          </tr>
        </table>
    </div>
    <div class="back">
      <table>
        <tr>
          <td> W59.21XA:Bitten by turtle, initial encounter </td>
        </tr>
      </table>
    </div>
  </div>
  </label>
</div>

Here is my CSS:

header{
text-align: center;
font-size: 30px;
margin-bottom: 5%
}

label {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: block;
width: 300px;
height: 200px;
position: static;
left: 50%;
top: 50%;
cursor: pointer;
}

img {height: 150px;
}

.card {
position: relative;
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;
z-index: 20;
}

.card div {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #FFF;
    text-align: center;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 2px;
}
.card div > table {
background: #fff;
width: 100%;
height: 100%;
}

.card .back {
    color: #222;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    }



label:hover .card {
-webkit-transform: rotateX(20deg);
transform: rotateX(20deg);
box-shadow: 0 20px 20px rgba(50,50,50,.2);
}

input {
display: none;
}

:checked + .card {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}

label:hover :checked + .card {
transform: rotateX(160deg);
-webkit-transform: rotateX(160deg);
box-shadow: 0 20px 20px rgba(255,255,255,.2);
}

The boostrap stylesheet is below

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Possible duplicate of [Bootstrap 3 - grid with fixed wrapper - Prevent columns from stacking up](http://stackoverflow.com/questions/18715955/bootstrap-3-grid-with-fixed-wrapper-prevent-columns-from-stacking-up) — Cave Johnson, Dec 22 '16 at 19:42
Hi everyone. I was out for the holidays, but I'm back and I'll try implementing these solutions and let you know how they work! — Robert Garza, Dec 27 '16 at 22:53
Kodos johnson, the issue was fixed by using col-xs-*, thanks! — Robert Garza, Dec 28 '16 at 21:09

score 0 · Accepted Answer · answered Dec 23 '16 at 00:48

0

Please visit BootStrap official responsive guide it will help you to fix the issue. You can also take help from Bootstarp Expo Theme

answered Dec 23 '16 at 00:48

1

This was kind of helpful. I had actually read it before, but being a newbie some of this went over my head and I also think I had skimmed over the part about using col-xs-*. I was able to fix the issue using col-xs-* though, thanks! – Robert Garza Dec 28 '16 at 21:07

How do I stop columns from stacking as I resize screen?

1 Answers1