如何讓這些div在頁面響應下相互移動？

Question

我有內他們圖像的div的一行是這樣的：

當我改變頁面大小，基本上就是它看起來像在移動設備上的div開始跌破每其他像這樣：

這是驚人的，因爲它正是我想要的。但我有div的看起來像這樣的另一行：

但是，當我改變頁面大小，這組的div不要在對方摔倒像其他的div。他們只是被頁面切斷，所以基本上這些div不是移動響應。任何人都可以幫助我得到這些第二套div，如第一套一樣響應嗎？ 提前謝謝！

HTML：

<div class="row-fluid" id="extras"> 
    <div class="container-fluid"> 
     <div class="row-fluid flex"> 

      <div class="block text-center"> 
       <img src="http://mysite/wp-content/uploads/2016/05/socialmed.png" width="155" height="auto" max-width="100%"/> 
      </div> 

      <div class="block text-center"> 
       <ul class="aboutli"> 
        <li><a target="_blank" href="http://mysite/information">About Us</a></li> 
        <li><a target="_blank" href="http://mysite/information">FAQ's</a></li> 
        <li><a target="_blank" href="http://mysite/information">Contact Us</a></li> 
        <li><a target="_blank" href="http://mysite/information">Work With Us</a></li> 
        <li><a target="_blank" href="http://mysite/information">Terms and Conditions</a></li> 
        <li><a target="_blank" href="http://mysite/information">Privacy Policy<br></a></li> 
        <li><a target="_blank" img src="http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png" href="https://www.drinkaware.co.uk/"><div id="drinkaware"></div></a></li> 
       </ul> 
      </div> 

      <div class="block text-center"> 
       <div id="words"> 
        <p class="become">become a driver</p> 
        <p class="driver-para">As an ever evolving new start up we'll constantly be looking for friendly drivers to join the team, so If you'd be interested in join our team click the button below to see the available opportunities we have available.</p> 
        <input type="submit" id="driver-btn" value="FIND OUT MORE" onclick="location='http://mysite/join-the-team/'"/> 
       </div> 
      </div> 

      <div class="block text-center"> 
       <img src="http://mysite/wp-content/uploads/2016/07/testimg.png" width="200" height="auto"/> 
      </div> 

     </div> 
    </div> 
</div> 

CSS：

#extras { 
    height: auto; 
    width: 100%; 
    overflow: hidden; 
    background-color: #fff; 
} 
div.block { 
    padding: 10px 50px 10px 50px; 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
} 
.flex { 
    display: flex; 
} 
#words { 
    width: 300px; 
    height: auto; 
} 
#linksdrinks { 
    margin-top: 70px; 
    margin-right: 70px; 
    width: 160px; 
    height: 238px; 
    display: inline-block; 
    vertical-align: top; 
} 
ul.aboutli { 
    color: #000000; 
    font-size: 13px; 
    margin: 0; 
    text-decoration: none; 
    list-style-type: none !important; 
    line-height: 0.8cm; 
} 
#drinkaware { 
    width: 156px; 
    height: 50px; 
    display:list-item; 
    background-image: url('http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png'); 
    background-size: 150px auto; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-color: transparent; 
    vertical-align: top; 
    list-style-type: none !important; 
} 
#driver { 
    margin-left: 70px; 
    margin-right: 70px; 
    padding: 5px; 
    width: 300px; 
    height: auto; 
    display: inline-block; 
} 
.become { 
    color: #a6a6a6; 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.driver-para { 
    font-size: 13px; 
} 
#driver-btn { 
    color: #fd0e35; 
    font-size: 11px; 
    font-weight: bold; 
    text-shadow: none; 
    padding: 7px; 
    background-color: #fff; 
    border: 2px solid #fd0e35; 
    box-shadow: none; 
    border-radius: 4px; 
    outline: none; 
} 
#driver-btn:hover { 
    color: #fff; 
    background-color: #fd0e35; 
} 
#open24 { 
    display: inline-block; 
    width: 200px; 
    height: auto; 
    background-image: url('http://mysite/wp-content/uploads/2016/04/open247.png'); 
    background-size: 250px auto; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-color: transparent; 
} 

Answer 1

你可以試試這個

@media screen and (max-width:767px){ 
    .flex { 
    display: block; 
    } 
} 

Answer 2

嘗試使用此代碼。寫你的下面的CSS在媒體查詢

@media (min-width:767px) { 
div.block { 
    padding: 10px 50px 10px 50px; 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
} 
.flex { 
    display: flex; 
} 
} 

Answer 3

你可以嘗試下面的代碼。

.flex { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
} 

Answer 4

也爲跨瀏覽器支持display: inline-flex;現在是display: flex;

一定要使用

http://autoprefixer.github.io/