5つの画像を3列に整列させる

Question

私はブートストラップを使用しています。

私はコンテナ を持っています。 行にはcol-md-3のイメージのリストがあります。 行にはcol-md-9内の記事のリストがあります。

画像が画面の上部に移動する場合（画面が小さいため）、必要な数の行に画像を水平に表示します。画像が画面の左側にあるとき、それらを垂直に整列させたい。

どうすればよいですか？

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <img src="https://www.coca-cola.com.au/bundles/cokeweb/uikit/img/logos/coke/logo-small-retina.png" width="170" height="50" border="0" alt="Coke"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Mcdonalds-90s-logo.svg/2000px-Mcdonalds-90s-logo.svg.png" width="70" height="50" border="0" alt="Mcdonalds"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Hershey_logo.svg/2000px-Hershey_logo.svg.png" width="180" height="50" border="0" alt="Hershey"> 
     <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Frito_Lay_Logo.png/975px-Frito_Lay_Logo.png" width="70" height="50" border="0" alt="Frito Lay"> 
     <img src="https://jobdevelopers.files.wordpress.com/2015/01/levis-logo1.png" width="90" height="50" border="0" alt="Levis"> 
     <img src="http://www.shoutbusiness.co.uk/wp-content/uploads/2015/05/Black-Decker-logo.jpg" width="100" height="50" border="0" alt="Black and Decker"> 
    </div> 
    <div class="col-md-9"> 
     <p>python prints alot of articles here</p> 
    </div> 
    </div> 

EDIT 1

私はここでのjsfiddleを作るしようとしています： https://jsfiddle.net/ced41zLy/

Answer 1

列と行を作成し、ブレークポイントを設定します。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-md-3"> 
 
     <div class="row"> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://www.coca-cola.com.au/bundles/cokeweb/uikit/img/logos/coke/logo-small-retina.png" alt="Coke"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Mcdonalds-90s-logo.svg/2000px-Mcdonalds-90s-logo.svg.png" alt="Mcdonalds"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Hershey_logo.svg/2000px-Hershey_logo.svg.png" alt="Hershey"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Frito_Lay_Logo.png/975px-Frito_Lay_Logo.png" alt="Frito Lay"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="https://jobdevelopers.files.wordpress.com/2015/01/levis-logo1.png" alt="Levis"> 
 
     </div> 
 
     <div class="col-xs-4 col-md-12"> 
 
      <img class="img-responsive" src="http://www.shoutbusiness.co.uk/wp-content/uploads/2015/05/Black-Decker-logo.jpg" alt="Black and Decker"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-md-9"> 
 
     <p>python prints alot of articles here</p> 
 
    </div> 
 
    </div> 
 
</div>

注：あなたは幅と大騒ぎする必要はないように、ブートストラップの.img-responsiveを使用することができます。