Making Bild reagiert mit Medienabfrage

Question

Kann jemand helfen, dieses Listen-Layout reagieren für verschiedene Bildschirmgröße, mit Medienabfrage? Derzeit ist es ein flüssiges Layout, das sich an die Bildschirmgröße anpasst. Ich brauche einen Vorschlag zur Verwendung der Medienabfrage damit.

Mein ursprünglicher Code ist bei https://jsfiddle.net/7qsp1k0o/2/

.item.list-group-item { 
 
    float: none; 
 
    width: 100%; 
 
    background-color: #fff; 
 
    margin-bottom: 10px; 
 
} 
 
.item.list-group-item .list-group-image { 
 
    margin-right: 10px; 
 
} 
 
.item.list-group-item .thumbnail { 
 
    margin-bottom: 0px; 
 
} 
 
.item.list-group-item .caption { 
 
    padding: 9px 9px 0px 9px; 
 
} 
 
.item.list-group-item:before, 
 
.item.list-group-item:after { 
 
    display: table; 
 
    content: " "; 
 
} 
 
.item.list-group-item img { 
 
    float: left; 
 
} 
 
.item.list-group-item:after { 
 
    clear: both; 
 
} 
 
.list-group-item-text { 
 
    margin: 0 0 11px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <div id="products" class="row list-group "> 
 
    <div class="item col-xs-4 col-lg-4 list-group-item"> 
 
     <div class="thumbnail"> 
 
     <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" /> 
 
     <div class="caption"> 
 
      <h4 class="group inner list-group-item-heading"> 
 
         Activity title</h4> 
 
      <p class="group inner list-group-item-text"> 
 
      Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
 
      <div class="row"> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <p class="lead"> 
 
       Charge : $21.000</p> 
 
      </div> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <a class="btn btn-success" href="#">Apply Now</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="item col-xs-4 col-lg-4 list-group-item"> 
 
     <div class="thumbnail"> 
 
     <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" /> 
 
     <div class="caption"> 
 
      <h4 class="group inner list-group-item-heading"> 
 
         Activity title</h4> 
 
      <p class="group inner list-group-item-text"> 
 
      Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
 
      <div class="row"> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <p class="lead"> 
 
       Charge : $21.000</p> 
 
      </div> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <a class="btn btn-success" href="#">Apply Now</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item col-xs-4 col-lg-4 list-group-item"> 
 
     <div class="thumbnail"> 
 
     <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" /> 
 
     <div class="caption"> 
 
      <h4 class="group inner list-group-item-heading"> 
 
         Activity title</h4> 
 
      <p class="group inner list-group-item-text"> 
 
      Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
 
      <div class="row"> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <p class="lead"> 
 
       Charge : $21.000</p> 
 
      </div> 
 
      <div class="col-xs-12 col-md-6"> 
 
       <a class="btn btn-success" href="#">Apply Now</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Edit: Hinzugefügt gewünschte Ergebnis. Ich möchte, dass der Text nicht unter dem Bild fließen sollte, sondern das Ganze (Bild und Box) sollte verkleinert werden, um die Bildschirmgröße anzupassen.

Answer 1

Styling auf die Kreativität basiert, könnte man jedoch diese .. helfen

<div class="container"> 
    <div class="row"> 
     <!-- BEGIN PRODUCTS --> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
      <span class="thumbnail"> 
       <img src="http://placehold.it/500x400" alt="..."> 
       <h4>Product Tittle</h4> 
       <div class="ratings"> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star"></span> 
        <span class="glyphicon glyphicon-star-empty"></span> 
       </div> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
       <hr class="line"> 
       <div class="row"> 
        <div class="col-md-6 col-sm-6"> 
         <p class="price">$29,90</p> 
        </div> 
        <div class="col-md-6 col-sm-6"> 
         <button class="btn btn-success right" > BUY ITEM</button> 
        </div> 

       </div> 
      </span> 
     </div> 
     <!-- END PRODUCTS --> 
    </div> 
</div> 

Und die CSS-Code

h4{ 
    font-weight: 600; 
} 
p{ 
    font-size: 12px; 
    margin-top: 5px; 
} 
.price{ 
    font-size: 30px; 
    margin: 0 auto; 
    color: #333; 
} 
.right{ 
    float:right; 
    border-bottom: 2px solid #4B8E4B; 
} 
.thumbnail{ 
    opacity:0.70; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 
.thumbnail:hover{ 
    opacity:1.00; 
    box-shadow: 0px 0px 10px #4bc6ff; 
} 
.line{ 
    margin-bottom: 5px; 
} 
@media screen and (max-width: 770px) { 
    .right{ 
     float:left; 
     width: 100%; 
    } 
}