wordpress中的Bootstrap列自定义

In wordpress, I am trying to fetch pages by get_pages like this :

    <div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    Page One
                </div><!--col 12-->

                <div class="col-md-12">
                    Page Two
                </div><!--col 12-->
            </div><!--row-->
        </div><!--col 4-->

        <div class="col-md-4">
            Page Three
        </div><!--col 4-->

        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    Page Four
                </div><!--col 12-->

                <div class="col-md-12">
                    Page Five
                </div><!--col 12-->
            </div><!--row-->
        </div><!--col 4-->

    </div><!--row-->
</div><!--container-->

Wherein,

  1. 1st & 3rd column should have 2 rows each.
  2. 2nd there should be only 1.
  3. Height of 2nd Column equal to 1st & 3rd like masonary.

I tried using if condition but no luck. Please advise.

Thanks, Vikram

I haven't try tested it but check it out :) just place the php code on it

$result = get_pages() etc..
     <div class="container">
        <div class="row">
           <div class="col-md-4">
            foreach($result => $key as $pages):
              if($key !== 2):
                <div class="col-md-12">
                   // Page One, two, four....
                </div><!--col 12-->

              else:
            </div> <!-- end col-md-4 -->
           <div class="col-md-4">
          //  Page Three
           </div><!--col 4-->    
         <div class="col-md-4"> <!-- make a new one -->
         endif;
        endforeach;
        </div>   <!-- end first col-md-4 -->

    </div><!--row-->
</div><!--container-->