Wie verhindere ich das Stapeln von Spalten, wenn ich die Größe des Bildschirms ändere?

Question

Ich versuche, das Aussehen von zwei Spalten von Flash-Karten nebeneinander zu erstellen und ich kann dieses Aussehen auf meinem Laptop mit dem Browser erstellen den vollen Bildschirm (oder den größten Teil des Bildschirms), aber sobald ich beginne Die Größe des Browsers wird kleiner. Meine Flash-Karten sind übereinander gestapelt. Ich habe versucht, zwei Klassen für jede Spalte zu erstellen und sie zu schweben, und ich habe sogar versucht, das Grid-System von Bootstrap ohne Glück zu verwenden. Hier ist mein letzter Versuch:

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

Hier ist meine 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); 
} 

Das Bootstrap Sheet unter

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

Answer 1

Bitte besuchen Sie BootStrap official responsive guide es wird Ihnen helfen, das Problem zu beheben. Sie können auch Hilfe von Bootstarp Expo Theme