How to make a div apper for smaller screen

Question

I am using flex to display pictures. For wide screen all works well but as for for smaller media sizes I would like to see div with the class "base" apper under pictures even when they are displayed in a second an third row. How could I implement this?

Take a look at it on Codepen

<div class="container">
   <div class="bookshelf">
      <div class="bookshelf-background">
        <div class="base"></div>
        </div>
         <div class="bookshelf-images">
     <ul class="container">
       <li class="flex flex1"> 
         <a href="#" class="img">
           <div style="width: 250px">
             <img src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro- 
600w-1112517635.jpg" style="width: 150px;">
           </div>
         </a> 
       </li>

       <li class="flex flex1"> 
        <a href="#" class="img">
          <div style="width: 250px">
            <img src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro- 
600w-1112517635.jpg" style="width: 150px;">
          </div>
        </a> 
       </li>
      </ul>
    </div>
  </div>
</div>`

Answer 1

Can you please check with this code, hope it will resolve your query. First, we remove static "base" class div and add background in separate list item using pseudo-element.

.flex {
  margin-bottom: 50px;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}
.bookshelf-images .flex {
  position: relative;
  padding-bottom: 14px;
}
.bookshelf-images .flex:before {
  content: "";
  width: 100%;
  height: 45px;
  border-bottom: 9px solid fuchsia;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #35091b;
}
.bookshelf-images .flex a{
  position: relative;
}
.container {
  max-width: 800px;
  background: none;
  margin-bottom: 0px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  margin-top: -3px;
}

.container .bookshelf {
  display: flex;
  position: relative;
}

.container .bookshelf-images {
  height: 100%;
}

.container .bookshelf-image {
  height: 100%;
  position: relative;
  max-width: 100%;
  display: flex;
}

li {
  list-style-type: none;
}
ul {
  margin-left: 0;
  padding-left: 0;
}

.container .bookshelf-background {
  position: absolute;
  border: 0px solid #ff0000;
  left: 0;
  bottom: 45px;
  width: 100%;
  height: 42px;
}

.container .bookshelf-background .base {
  width: 100%;
  height: 100%;
  border: 0px solid #fff000;
  box-shadow: 0px 9px 1px fuchsia;
  position: absolute;
  background: #35091b;
}

<div class="container">
  <div class="bookshelf">
    <!-- <div class="bookshelf-background">
      <div class="base"></div>
    </div> -->
    <div class="bookshelf-images">
      <ul class="container">
        <li class="flex flex1">
          <a href="#" class="img">
            <div style="width: 250px">
              <img
                src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-600w-1112517635.jpg"
                style="width: 150px;"
              />
            </div>
          </a>
        </li>

        <li class="flex flex1">
          <a href="#" class="img">
            <div style="width: 250px">
              <img
                src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-600w-1112517635.jpg"
                style="width: 150px;"
              />
            </div>
          </a>
        </li>

        <li class="flex flex1">
          <a href="#" class="img">
            <div style="width: 250px">
              <img
                src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-600w-1112517635.jpg"
                style="width: 150px;"
              />
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>