画像がどのように表示されるのは、デバイスが中型の場合は2行、小型デバイスの場合は1つです

Question

私は6つのイメージを持っていますが、画面のサイズを変更すると反応します。 メディアデバイスでは、2つのイメージを1行に表示する必要があります。小さなデバイス1のイメージでも、見出しのテキストを応答性にする方法がわかりません。サイズを小さくする必要があります。ここで

-header私のコードです：

更新日：

JsFiddle

HTML：

<div class="container"> 
    <div class="row"> 


    <div class="image-container"> 

      <div class="image-portfolio col-lg-3 col-md-4 col-sm-6"> 
       <div class="img-block"> 
          <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt=""> 
       </div> 
       <div class="overlay-header"> 
         <h1>Heading</h1> 
       </div> 
       <div class="text-overlay"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p> 
       </div> 
      </div> 

      <div class="image-portfolio col-lg-3 col-md-4 col-sm-6"> 
       <div class="img-block"> 
          <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt=""> 
       </div> 
       <div class="overlay-header"> 
         <h1>Heading</h1> 
       </div> 
       <div class="text-overlay"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p> 
       </div> 
      </div> 

      <div class="image-portfolio col-lg-3 col-md-4 col-sm-6"> 
       <div class="img-block"> 
          <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt=""> 
       </div> 
       <div class="overlay-header"> 
         <h1>Heading</h1> 
       </div> 
       <div class="text-overlay"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p> 
       </div> 
      </div> 

        <div class="image-portfolio col-lg-3 col-md-4 col-sm-6"> 
       <div class="img-block"> 
          <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt=""> 
       </div> 
       <div class="overlay-header"> 
         <h1>Heading</h1> 
       </div> 
       <div class="text-overlay"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p> 
       </div> 
      </div> 

      <div class="image-portfolio col-lg-3 col-md-4 col-sm-6"> 
       <div class="img-block"> 
          <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt=""> 
       </div> 
       <div class="overlay-header"> 
         <h1>Heading</h1> 
       </div> 
       <div class="text-overlay"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p> 
       </div> 
      </div> 

      <div class="image-portfolio col-lg-3 col-md-4 col-sm-6"> 
       <div class="img-block"> 
          <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt=""> 
       </div> 
       <div class="overlay-header"> 
         <h1>Heading</h1> 
       </div> 
       <div class="text-overlay"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p> 
       </div> 
      </div> 

     </div> 


    </div> 
</div> 

CSS：あなたがメディアデバイス上の行で唯一の2つの画像を表示したいと、あなたはCOL-MD-6クラスを使用する必要があります

.image-container { 
    margin-top: 50px; 
    text-align: center; 
} 


.image-portfolio { 
    margin:2px; 
    height: 250px; 
    width: 30%; 
    overflow: hidden; 
} 

.img-block img { 
    height: 250px; 
    max-width: 100%; 
    float: left; 
    transition: all 0.5s; 

} 

.overlay-header { 
    position: absolute; 
    max-width: 225px; 
    height: 55px; 
    background: rgba(202,205,206,.7); 
    margin-top: 50px; 

} 

.overlay-header h1 { 
    line-height: 20px; 

} 

.text-overlay { 
    position: relative; 
    text-align: center; 
    font-size: 16px; 
    line-height: 22px; 
    bottom: 120px; 
    color: white; 
    visibility: hidden; 
} 

.image-portfolio:hover .img-block img { 
    cursor:pointer; 
    transform: scale(1.3); 
} 

.image-portfolio:hover { 
    cursor:pointer; 
} 

.image-portfolio:hover .text-overlay { 
    visibility: visible; 
} 

.image-portfolio:hover .img-block img { 
    filter: brightness(40%); 
} 

Answer 1

これは、メディアデバイス上の12列のうちの意味あなたの1つのイメージは6列を取るでしょう。

小さなデバイスの行に1つのイメージしか表示したくない場合は、col-sm-12クラスを使用する必要があります。これは、小型デバイスの12列のうちの1つのイメージが12列すべてを占めることを意味します。

col-lg-3は、より大きなデバイスでは、4つのイメージが連続して表示されます。参考のため

<div class="image-portfolio col-lg-3 col-md-6 col-sm-12"> 

.col-xs = *Extra small devices (ie Phones) (<768px) 

.col-sm = Small devices (ie Tablets) (≥768px) 

.col-md = Medium devices (ie laptops, or small desktops) (≥992px) 

.col-lg = Large devices (ie Desktops) (≥1200px)* 

単に追加対応する画像を作るための

対応する画像のimg応答クラス

<img class="img-responsive" src="link/to/your/image"> 

ヘッダーのためにあなたは、異なる幅で

@media(max-width:768px){ 
     h1{ 
      font-size:20px; 
     } 
} 

をCSSを書くこと