javascript - 我怎样才能使这些 div 在页面响应下相互移动？

Question

我有一行 div，其中包含如下所示的图像:

当我更改页面大小时，本质上就是它在移动设备上的样子，div 开始像这样相互下降:

这太棒了，因为这正是我想要的。但是我还有另一排看起来像这样的 div:

但是，当我更改页面大小时，这组 div 不会像其他 div 一样相互重叠。它们只是被页面 chop 了，所以基本上这些 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;
  }
}