I want to create a custom Qweb report which will print the Contacts/Members with individual details. I am facing issue in displaying the details in 3 column layout like in telephone directory i.e. Contact details start from the first column on page 1, when the page ends then data should go to next column instead of the second page. How can I make it? 

Below is my Qweb template code. 

<div class="page mt0" >
  <div class="oe_structure"/>
  <div class="row">
   <t t-foreach="docs" t-as="o">
      <div class="col-4" style="font-size:12px;">
        <span t-field="o.name"/><br/>
        <span t-if="o.street"><span t-esc="o.street"/>, </span>
        <span t-if="o.street2"><span t-esc="o.street2"/>, </span>
        <span t-if="o.city"><span t-esc="o.city"/>, </span>
        <span t-if="o.zip"><span t-esc="o.zip"/>, </span>
        <span t-if="o.state_id"><span t-esc="o.state_id.name"/>, </span>         <span t-if="o.country_id"><span t-esc="o.country_id.name"/>,</span><br/> 
        <span><strong>Membeship Number: </strong><span t-esc="str(o.membership_id)"/><br/></span>
        <span><strong>Tel: </strong><span t-field="o.phone"/><br/></span>
        <span><strong>Mobile: </strong><span t-field="o.mobile"/><br/></span>
        <span><strong>Fax: </strong><span t-field="o.fax"/><br/></span>         <span><strong>E-mail: </strong><span t-field="o.email"/><br/></span>
        <span><strong>Website: </strong><span t-field="o.website"/><br/></span>
        <span><strong>Contact Person(s): </strong><br/>
 <span t-if="o.first_contact_person">1.<span t-field="o.first_contact_person.name"/></span>
 <span t-if="o.second_contact_person"><br/>2. <span t-field="o.second_contact_person.name"/></span> 

 <t t-if="(not o.first_contact_person and not o.second_contact_person) and o.child_ids"> 
     <t t-set="contact_count" t-value="1"/> 
     <t t-if="o.child_ids" t-foreach="o.child_ids" t-as="contact"> 
         <t t-if="contact_count &lt;=2"> 
             <span><span t-esc="contact_index+1"/>. <span t-esc="contact.name"/><br/></span> 
             <t t-set="contact_count" t-value="contact_index+1"/> 
         </t> 
     </t> 
 </t> 
 </span><br/> 
 <span><strong>Products/Services:</strong>
 <span t-if="o.comment"><span t-field="o.comment"/></span>
        </span> 
     </div><br/> 
 </t> 
 </div> 
 <div class="oe_structure"/> 
</div>

This gives me all Contact/Members with required details on PDF. But when page ends, data goes to next page. Instead of this, I want to print Contact/Member details to be in next column. like in 3 columns Telephone Directory.

For static data, I would have done like 

<div class="row">
    <div class="col-4">abcabcabc</div>
    <div class="col-4">mnopmnopmnop</div>
    <div class="col-4">tretetqwetwq</div>
</div>

But as data is dynamic, I could not find a way to do this.

Please suggest how can I do this in Qweb or is there any CSS or Bootstrap utility available?