固定頁面左側，中間和右側圖像的位置，但也是響應

Question

如果我想在左側同時放置一個圖像，並且同一行的右側同時放置一個圖像，以便它可以在每個設備中響應。那我該怎麼辦？正如你可以看到在iphone和耳機圖像的給定圖像的例子。

我試圖實現像this。

問題是，這是反應如此個人圖像像iPhone，標誌，耳機堆疊在較小的屏幕下彼此。

HTML：

<div class="jumbotron" style="background-image: url('background.png'); width: 100%; height: 100%;position: absolute; top: 0; left: 0; overflow: hidden; background-size: cover; 
background-repeat: no-repeat;"> 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-4"> 

       <div id="iphone" class="col-xs-4"> 
       </div> 
       <div id="camera" class="col-xs-4"> 
       </div> 
      </div> 
      <div class="col-md-4"> 

       nothing 
       </div> 

      <div class="col-md-4"> 

       <div id="headphones" class="col-xs-4"> 
       </div> 
      </div> 
    </div> 

    <div class="row"> 
<div class="col-md-4"> 

       <div id="notebook" class="col-xs-4"> 
       </div> 
       <div id="glasses" class="col-xs-4"> 
       </div> 
      </div> 
      <div class="col-md-4"> 

       <div id="logo" class="col-xs-4"> 
       </div> 
       </div> 

      <div class="col-md-4"> 

       <div id="gopro" class="col-xs-4"> 
       </div> 
       <div id="controller" class="col-xs-4"> 
       </div> 
      </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div id="cookie" class="col-xs-4"> 
       </div> 
       <div id="tea" class="col-xs-4"> 
       </div> 
     </div> 
     <div class="col-md-6"> 
      <div id="macbook" class="col-xs-4"> 
       </div> 
     </div> 
     <div class="col-md-3"> 
      <div id="pen" class="col-xs-4"> 
       </div> 
       <div id="harddisk" class="col-xs-4"> 
       </div> 
       <div id="iwatch" class="col-xs-4"> 
       </div> 
     </div> 
     </div> 
    </div> 
</div> 

CSS：

/********************iphone*******************************/ 
#iphone 
{ 
    position: relative; 
    top:-110px; 
    left:-140px; 
    background-image: url('../images/New Folder/iPhone.-3.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    float: left; 
    width: 200px; 
    height: 196px; 
    padding-top: 102.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #iphone { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #iphone {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #iphone { height: auto; 
    max-width:100%; } 
} 
/********************headphones***************************/ 
#headphones 
{ 
    position: relative; 
    float: right; 
    top:-30px; 
    right:-130px; 
    background-image: url('../images/New Folder/headphones-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 400px; 
    height: 450px; 
    padding-top: 102.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #headphones { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #headphones {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #headphones { height: auto; 
    max-width:100%; } 
} 
/******************camera***********************/ 
#camera 
{ 
    position: relative; 

    top:110px; 
    left:-300px; 
    background-image: url('../images/New Folder/camera-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 160px; 
    height: 182px; 
    padding-top: 102.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #camera { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #camera {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #camera { height: auto; 
    max-width:100%; } 
} 
/***********notebook*******************/ 
#notebook 
{ 
    position: relative; 

    top:-190px; 
    left:-130px; 
    background-image: url('../images/New Folder/moleskine-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 300px; 
    height: 275px; 
    padding-top: 109.47%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
} 
@media only screen and (max-width: 767px) { 
    #notebook { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #notebook {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #notebook { height: auto; 
    max-width:100%; } 
} 
/****************glasses******************/ 
#glasses 
{ 
    position: absolute; 

    top:-110px; 
    left:0px; 
    background-image: url('../images/New Folder/glasses-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 250px; 
    height: 156px; 
    padding-top: 192.36%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #glasses { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #glasses {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #glasses { height: auto; 
    max-width:100%; } 
} 
/**************logo************************/ 
#logo 
{ 
    position: relative; 

    top:-300px; 
    left:0px; 
    background-image: url('../images/New Folder/logo-transparent.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:200%; 
    display:block; 
    width: 3800px; 
    height: 1800px; 
    padding-top: 225.07%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #logo { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #logo {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #logo { height: auto; 
    max-width:100%; } 
} 
/******************gopro*****************/ 
#gopro 
{ 
    position: relative; 

    top:-100px; 
    left:0px; 
    background-image: url('../images/New Folder/GoPro-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 120px; 
    height: 121px; 
    float: right; 
    padding-top: 95.02%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #gopro { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #gopro {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #gopro { height: auto; 
    max-width:100%; } 
} 
/********************controller****************/ 
#controller 
{ 
    position: relative; 

    top:-100px; 
    left:240px; 
    background-image: url('../images/New Folder/console-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 50px; 
    height: 95px; 
    padding-top: 68.9%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float: left; 
} 
@media only screen and (max-width: 767px) { 
    #controller { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #controller {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #controller { height: auto; 
    max-width:100%; } 
} 
/**************tea****************/ 
#tea 
{ 
    position: absolute; 

    top:-870px; 
    left:100px; 
    background-image: url('../images/New Folder/tea-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 180px; 
    height: 160px; 
    padding-top: 95.9%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float: right; 
} 
@media only screen and (max-width: 767px) { 
    #tea { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #tea {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #tea { height: auto; 
    max-width:100%; } 
} 
/****************cookie****************/ 
#cookie 
{ 
    position: absolute; 

    top:-870px; 
    left:0px; 
    background-image: url('../images/New Folder/cookies-2.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 90px; 
    height: 82px; 
    padding-top: 95.9%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #cookie { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #cookie {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #cookie { height: auto; 
    max-width:100%; } 
} 
/****************macbook****************/ 
#macbook 
{ 
    position: relative; 

    top:-1000px; 
    left:0px; 
    background-image: url('../images/New Folder/MacBook-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 550px; 
    height: 447px; 
    padding-top: 123.04%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #macbook { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #macbook {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #macbook { height: auto; 
    max-width:100%; } 
} 
/**************************harddisk*****************/ 
#harddisk 
{ 
    position: absolute; 

    top:-1000px; 
    left:250px; 
    background-image: url('../images/New Folder/hard-disk-1.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 300px; 
    height: 325px; 
    padding-top: 92.302%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float: right; 
} 
@media only screen and (max-width: 767px) { 
    #harddisk { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #harddisk {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #harddisk { height: auto; 
    max-width:100%; } 
} 
/********************iwatch*****************************/ 
#iwatch 
{ 
    position: absolute; 

    top:-900px; 
    left:0px; 
    background-image: url('../images/New Folder/iWatch-4.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 300px; 
    height: 213px; 
    padding-top: 127.79%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
    float:left; 
} 
@media only screen and (max-width: 767px) { 
    #iwatch { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #iwatch {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #iwatch { height: auto; 
    max-width:100%; } 
} 
/****************pen*******************/ 
#pen 
{ 
    position: absolute; 

    top:-870px; 
    left:-50px; 
    background-image: url('../images/New Folder/handle.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index:100; 
    height: auto; 
    max-width:100%; 
    display:block; 
    width: 150px; 
    height: 177px; 
    padding-top: 84.79%; /* (img-height/img-width * container-width) */ 
       /* (853/1280 * 100) */ 
    z-index: 1000; 
} 
@media only screen and (max-width: 767px) { 
    #pen { height: auto; 
    max-width:50%; } 
} 
@media only screen and (min-width: 768px) { 
    #pen {height: auto; 
    max-width:60%; } 
} 
@media only screen and (min-width: 1280px) { 
    #pen { height: auto; 
    max-width:100%; } 
} 
.row 
{ 

    height: 33%; 
} 

Answer 1

HTML

<div class="wrapper col-md-3"> 
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/> 
</div> 
<div class="wrapper col-md-6"> 
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/> 
</div> 

CSS

.wrapper { float: left; clear: left; display: table; table-layout: fixed; } 
img.img-responsive { display: table-cell; max-width: 100%; } 

.col-md-6 { width: 25%; float: left;} 
.col-md-3 { width: 25%; float: right;} 

JSFiddle