使用Flexbox响应网格布局

Question

我正在尝试创建一个4列的网格，对于平板电脑大小，下降到2，然后使用弹性框创建1到智能手机大小。我已经走到了这一步，但我似乎无法让智能手机布局正常工作。

我想要的是在缩小浏览器时将布局设置为每页2列，当达到智能手机大小时，缩小到1列（堆叠布局）。

＆＃13;

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto:700,900');


* {
  box-sizing: border-box;  
}

#parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  padding: 10px;
  flex: 1;
  border: 5px solid white;
  transition: all 0.4s;
}

.child:hover {
  background-color: #efefef;
  cursor: pointer;
}

.child:hover h3 {
  color: red;
}

.child img {
  width: 100%;
}

/* Large Screen */
@media (min-width: 701px) {
  .child {
    min-width: 25%; 
  }
}

/* Medium Screen */
@media (max-width: 700px) {
  .child {
    min-width: 50%; 
  }
}

/* Small Screen */
@media (max-width: 400px) {
  #parent {
    flex-direction: column;
  }
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: black;
  font-size: 22px;
  display: inline-block;
}

p, body {
  font-family: 'Merriweather', serif;
  font-weight: 300;
  color: #666;
  font-size: 15px;
  line-height: 1.5em;
}

span.step {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 20px;
  border: 2px solid red;
  color: red;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  line-height: 1.4em;
  margin-right: 5px;
  text-align: center;
  width: 1.5em; 
}

＆＃13;

<div id="parent">
  <div class="child">
  <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/secondary/Beer-price-UK-pubs-goes-up-6p-pint-801398.jpg">  
    <span class="step">1</span><h3>Feathers Pub</h3>
    <p>This Upper Beaches pub is the closest you'll get to the real deal, at least without flying across the Atlantic. Since 1981 this brass and red velvet-clad gem has been pouring from a huge selection of drams to its thirsty regulars. With over 400 whiskies from over 100 distilleries, there's plenty to choose from, but if you get a bit lost navigating their massive list, they have specially designed 'whisky tour' flights to give you an overview of the main regions.</p>

  </div>
  <div class="child">
  <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/secondary/Beer-price-UK-pubs-goes-up-6p-pint-801398.jpg">  
    <span class="step">2</span><h3>Feathers Pub</h3>
    <p>This Upper Beaches pub is the closest you'll get to the real deal, at least without flying across the Atlantic. Since 1981 this brass and red velvet-clad gem has been pouring from a huge selection of drams to its thirsty regulars. With over 400 whiskies from over 100 distilleries, there's plenty to choose from, but if you get a bit lost navigating their massive list, they have specially designed 'whisky tour' flights to give you an overview of the main regions.</p>

  </div>
  <div class="child">
  <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/secondary/Beer-price-UK-pubs-goes-up-6p-pint-801398.jpg">  
    <span class="step">3</span><h3>Feathers Pub</h3>
    <p>This Upper Beaches pub is the closest you'll get to the real deal, at least without flying across the Atlantic. Since 1981 this brass and red velvet-clad gem has been pouring from a huge selection of drams to its thirsty regulars. With over 400 whiskies from over 100 distilleries, there's plenty to choose from, but if you get a bit lost navigating their massive list, they have specially designed 'whisky tour' flights to give you an overview of the main regions.</p>

  </div>
  <div class="child">
  <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/secondary/Beer-price-UK-pubs-goes-up-6p-pint-801398.jpg">  
    <span class="step">4</span><h3>Feathers Pub</h3>
    <p>This Upper Beaches pub is the closest you'll get to the real deal, at least without flying across the Atlantic. Since 1981 this brass and red velvet-clad gem has been pouring from a huge selection of drams to its thirsty regulars. With over 400 whiskies from over 100 distilleries, there's plenty to choose from, but if you get a bit lost navigating their massive list, they have specially designed 'whisky tour' flights to give you an overview of the main regions.</p>

  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;