Changing div's order with CSS with dynamic height, text vertical align middle

Question

Here's my HTML code:

<ul>
  <li>
    <div class="imgBox"><img 1></div>
    <div class="txtBox">text 1</div>
  </li>
  <li>
    <div class="imgBox"><img 2></div>
    <div class="txtBox">text 2</div>
  </li>
  <li>
    <div class="imgBox"><img 3></div>
    <div class="txtBox">text 3</div>
  </li>
  <li>
    <div class="imgBox"><img 4></div>
    <div class="txtBox">text 4</div>
  </li>
<ul>

The expected result in desktop is:

_____________________
|  img 1  |  txt 1  |
_____________________
|  txt 2 |   img2   |
_____________________
|  img 3  |  txt 3  |
_____________________
|  txt 4  |  img 4  |
_____________________

each block width:50%, images width:100% to the box, auto height; text in the middle of the box, like display:table-cell; text-align:center; vertical-align:middle;

and expected result on mobile is:

___________
|  img 1  |
___________
|  txt 1  |
___________ 
|  img 2  |
___________
|  txt 2  |
___________ 
|  img 3  |
___________
|  txt 3  |
___________ 
|  img 4  |
___________
|  txt 4  |
___________

everything is width:100% to the page

If I set display:flex to li, I can change the order of even row's, however, I don't find the way to make the text box 100% height, text align center. https://jsfiddle.net/wesleywai/phcgmopo/10/

If I use display:table to lia nd display:table-cell to div, I can make it 100% height like a native table cell but I don't find the way to change the order: https://jsfiddle.net/wesleywai/amm5mmvm/2/

I've also tried direction: rtl; and direction: ltr; and it doesn't seem to be working on my case.

Please help.

Answer 1

Drop the height: 100% on the div rule

You can drop the vertical-align:middle; too since it has no effect in this case, and if you want to vertical center the text, I added a new rule

.txtBox {
  display:flex;
  justify-content: center;
  align-items: center;
}

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

<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>