Unable to divide the the rows into columns using bootstrap

Question

I am working in custom new form for share point list.I have to design the form with bootstrap.Due to default share point field styles I can't able to override those fields. 

 

 Design template:

 

POtile                                                                      PoDate 

Share point textbox(default)                                    share point date(defult)

 

Ponumber                                                                 DeliveryDate

Share point textbox(default)                                      share point date(default)

 

I have to acheive the design look like in custom new form in share point. 

 

 

 

For title , po number fields are proprly aligns, I divide the web page using col-md-6, For po date and po title Not came into proper alignment.

 

Codes which I have tried so for:

<div class="container">
<div class="row">
<div class="col-md-6 purchasedetialsR">
<div class="row form-group potitle">
<div class=" col-sm-4">
<H3><nobr>Title *nobr>H3>
div>
<div class="col-sm-8">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
div>
div>
<div class="row form-group ponumber">
<div class="col-sm-4">
<H3 class="ms-standardheader">
<nobr>PONumbernobr>
H3>
div>
<div class="col-sm-8">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="PONumber" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PONumber')}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="PONumber" ControlMode="New"/>
div>
div>
div>
<div class="col-md-6 purchasedetialsL">
<div class=" row form-group POdate">
<div class="col-sm-4">
<H3 class="ms-standardheader">
<nobr>PODatenobr>
H3>
div>
<div class="col-sm-8 podat">
<span >
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="PODate" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PODate')}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="PODate" ControlMode="New"/>
span>
div>
div>
<div class="row form-group potitle">
<div class="col-sm-4">
<H3 class="ms-standardheader">
<nobr>POTitlenobr>
H3>
div>
<div class="col-sm-8">
<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="POTitle" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@POTitle')}"/>
<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="POTitle" ControlMode="New"/>
div>
div>
div>
div>
div>