How to display the first 3 li with 100% and per row 2 li with 33.33% width?

I have a design with me. I am getting one issue here.

What I a doing is, I have to display first 3 li tag with 100% width and remain li tag with 33.33%.

This is my expected output

li-100% width
li-100% width
li-100% width
li-33.33% width | li-33.33% width | big image here(not a part of loop)
li-33.33% width | li-33.33% width |
li-33.33% width | li-33.33% width |

But notice here, I am using while loop so I will get output like

li-100% width
li-100% width
li-100% width
li-33.33% width | li-33.33% width | li-33.33% width
li-33.33% width | li-33.33% width | li-33.33% width
li-33.33% width | li-33.33% width | li-33.33% width

I have to display only 2 li per row.

I am using below logic

<div class="wrapperClass">
  <ul>
    <?php
      $index = 0;
      $check=0;
       while ( condition ) {
         if ($index < 3) {?>
      <li>
        <!--width 100%-->
      </li>
      <?php }
                else{?>
      <li>
        <!--width with 33.33-->
      </li>
      <?php } $index++;}?>
  </ul>
  <img src="">
</div>

css

.wrapperClass ul li:nth-child(1),.wrapperClass ul li:nth-child(2),.wrapperClass ul li:nth-child(3){
    width:100%;
}
.wrapperClass ul li{width:33.33%;display: inline-block;}

Would you help me out with this issue?