Q:

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

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">

A:

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

