flex test

by Wesley Wai

HTML

<ul>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/27714/pexels-photo-27714.jpg?h=350&auto=compress'>
    </div>
    <div class="txtBox">
      FLOWER 1
    </div>
  </li>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/132419/pexels-photo-132419.jpeg?h=350&auto=compress'>
    </div>
    <div class="txtBox">
      FLOWER 2
    </div>
  </li>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/103573/pexels-photo-103573.jpeg?h=350&auto=compress'>
    </div>
    <div class="txtBox">
      FLOWER 3
    </div>
  </li>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/132474/pexels-photo-132474.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'>
    </div>
    <div class="txtBox">
      FLOWER 4
    </div>
  </li>
</ul>

CSS

ul{
  display:block;
  margin:0;
  padding:0;
}
li{
  display:flex;
  width:100%;
  height:auto;
}
div{
  display:block;
  width:50%;
  height:100%;
  text-align:center;
  vertical-align:middle;
  background:#fcc;
}
li:nth-child(even) .imgBox{
  order:2;
}
img{
  width:100%;
  height:auto;
  display:block;
}
@media screen and (max-width: 768px) {
  li{
    display:block;
  }
  div{
    width:100%
   }
  .txtBox{
    padding:20px;
    width:calc(100% - 40px);
  }
}