title: How to use display: block on RWD
body: <p>I've following design on the desktop <a href="https://i.stack.imgur.com/8k4rJ.jpg" rel="nofollow noreferrer">here</a></p>
  
  <p>I want display those divs in display: block when resolution is mobile but it doesn't not work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    width: 100%;
    height: 700px;
    margin: auto;
    background-image: url("../ta3.jpg");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: top right;
  }
  
  .header .header__center {
    width: 90%;
    height: 100%;
    margin: auto;
    position: relative;
    display: flex;
  }
  
  .header .header__center .header__bussword-row {
    width: 100%;
    height: auto;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
  }
  
  .header .header__center .header__bussword-row .bussword {
    font-size: 45px;
    color: #353535;
    font-weight: 800;
  }
  
  .header .header__center .skins-row {
    width: 100%;
    height: 200px;
    top: 264px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 320px;
  }
  
  .header .header__center .skins-row .ref-wrap {
    width: 130px;
    height: 200px;
    position: absolute;
    border: 1px solid #27d0d3;
    cursor: pointer;
  }
  
  .header .header__center .skins-row .ref-wrap:hover&gt;.reflink-logo {
    transform: scale(120%);
    transition: .4s;
  }
  
  .header .header__center .skins-row .ref-wrap:before {
    content: '';
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    opacity: .7;
  }
  
  .header .header__center .skins-row .ref-wrap .reflink-logo {
    max-width: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: -30px;
    position: absolute;
  }
  
  .header .header__center .skins-row .ref-wrap .reflink-info {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    text-align: center;
  }
  
  .header .header__center .skins-row .ref-wrap .reflink-info .reflink__link a {
    text-decoration: none;
    font-weight: 400;
    color: #252525;
  }
  
  .header .header__center .skins-row .ref-wrap .reflink-info .reflink__code {
    padding-top: 7px;
  }
  
  .header .header__center .skins-row .ref-wrap .reflink-info .reflink__price {
    padding-top: 7px;
  }
  
  @media screen and (max-width: 400px) {
    .header {
      width: 100%;
      height: 900px;
      margin: auto;
      background-image: url("../ta3.jpg");
      background-size: 140%;
      background-repeat: no-repeat;
      background-position: top right;
    }
    .header .header__center .skins-row {
      margin-top: 20px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="body light-theme"&gt;
    &lt;section class="header col01"&gt;
      &lt;div class="header__center"&gt;
        &lt;div class="header__bussword-row"&gt;
          &lt;h1 class="bussword"&gt;Dostępne reflinki&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="skins-row row02"&gt;
          &lt;div class="ref-wrap wrap01"&gt;
            &lt;img src="CrQS7tw.png" class="reflink-logo"&gt;
            &lt;div class="reflink-info col-003"&gt;
              &lt;p class="reflink__link"&gt;
                &lt;a href=""&gt;g4skins.com&lt;/a&gt;
              &lt;/p&gt;
              &lt;h5 class="reflink__code"&gt;Kod: xgleba&lt;/h5&gt;
              &lt;p class="reflink__price"&gt;Free 0.5$&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="skins-row row02"&gt;
          &lt;div class="ref-wrap wrap01"&gt;
            &lt;img src="CrQS7tw.png" class="reflink-logo"&gt;
            &lt;div class="reflink-info col-003"&gt;
              &lt;p class="reflink__link"&gt;
                &lt;a href=""&gt;g4skins.com&lt;/a&gt;
              &lt;/p&gt;
              &lt;h5 class="reflink__code"&gt;Kod: xgleba&lt;/h5&gt;
              &lt;p class="reflink__price"&gt;Free 0.5$&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="skins-row row02"&gt;
          &lt;div class="ref-wrap wrap01"&gt;
            &lt;img src="CrQS7tw.png" class="reflink-logo"&gt;
            &lt;div class="reflink-info col-003"&gt;
              &lt;p class="reflink__link"&gt;
                &lt;a href=""&gt;g4skins.com&lt;/a&gt;
              &lt;/p&gt;
              &lt;h5 class="reflink__code"&gt;Kod: xgleba&lt;/h5&gt;
              &lt;p class="reflink__price"&gt;Free 0.5$&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="skins-row row02"&gt;
          &lt;div class="ref-wrap wrap01"&gt;
            &lt;img src="CrQS7tw.png" class="reflink-logo"&gt;
            &lt;div class="reflink-info col-003"&gt;
              &lt;p class="reflink__link"&gt;
                &lt;a href=""&gt;g4skins.com&lt;/a&gt;
              &lt;/p&gt;
              &lt;h5 class="reflink__code"&gt;Kod: xgleba&lt;/h5&gt;
              &lt;p class="reflink__price"&gt;Free 0.5$&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="skins-row row02"&gt;
          &lt;div class="ref-wrap wrap01"&gt;
            &lt;img src="CrQS7tw.png" class="reflink-logo"&gt;
            &lt;div class="reflink-info col-003"&gt;
              &lt;p class="reflink__link"&gt;
                &lt;a href=""&gt;g4skins.com&lt;/a&gt;
              &lt;/p&gt;
              &lt;h5 class="reflink__code"&gt;Kod: xgleba&lt;/h5&gt;
              &lt;p class="reflink__price"&gt;Free 0.5$&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried add <strong>display: block</strong> to the <strong>skins-row</strong> class but it still does not work.</p>