title: Bootstrap4 - Splitting the Row into two columns
body: <p>I need to split a row into two so that I can accommodate two headings in a row, something like below:
  <a href="https://i.stack.imgur.com/GD99P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GD99P.png" alt="enter image description here"></a> </p>
  
  <p>With the current code that I have written, I am unable to separate the row into two like the above and also unable to maintain the responsiveness like below:
  <a href="https://i.stack.imgur.com/xb32p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xb32p.png" alt="enter image description here"></a></p>
  
  <p>Below is the output that I am getting with the current code:
  <a href="https://i.stack.imgur.com/UGO3O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UGO3O.png" alt="enter image description here"></a></p>
  
  <p>Below here is the code:</p>
  
  <pre><code>&lt;div class="container-fluid mail-body" style="width: 740px;"&gt;
  &lt;div id="account" class="row your-account"&gt;
    &lt;div class="col text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;"&gt;
      Your Account
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.your-account --&gt;
  
  &lt;div id="logo" class="row"&gt;
    &lt;div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;"&gt;
      LOGO
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.logo --&gt;
  
  &lt;div id="order-text" class="row"&gt;
    &lt;div class="col text-center" style="min-height: 98px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:36px; color: #0471AF; font-weight:100; display: flex; justify-content: center;"&gt;
      &lt;span style="align-self: center;"&gt;Heading Text&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.order-text --&gt;
  
  &lt;div class="row"&gt;
    &lt;div id="left-side-text" class="col-md-8 col-sm-12" style=" line-height: 18px;"&gt;
      &lt;span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; line-height: 18px; font-weight:100;"&gt;
        Dear XYZ,
      &lt;/span&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left;  padding-bottom:20px;"&gt;Good news! Your order is confirmed.&lt;/span&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;"&gt;
        Some other text
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;!-- /.left-side text --&gt;
  
    &lt;div id="order-information" class="col-md-4 col-sm-12 order-2"&gt;
      &lt;div class="col" style="height: 43px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:16px; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;"&gt;
        Order Details
      &lt;/div&gt;
      &lt;div class="col" style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color: #333333; padding: 10px; height: 73px; border: 1px solid #999999; border-top: none;"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0"&gt;Order Date:&lt;/td&gt;
            &lt;td class="col-2" style="padding-bottom: 10px; padding-left: 0"&gt;03/06/2016&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td class="col-2  font-weight-bold" style="padding: 0px;"&gt;Order #:&lt;/td&gt;
            &lt;td class="col-2" style="padding-bottom: 10px; padding-left: 0"&gt;123456789&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.order-information --&gt;
  
    &lt;div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;"&gt;
          &lt;br&gt;
          &lt;br&gt;Text1
          &lt;br&gt;
          &lt;br&gt; Text
          &lt;br&gt; Text
        &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="confirmation-email" class="row order-1"&gt;
    &lt;div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;"&gt;
      &lt;br&gt;
      &lt;br&gt;Text1
      &lt;br&gt;
      &lt;br&gt; Text
      &lt;br&gt; Text
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-md-12" &gt;
      &lt;div class="col" style="height: 36px; vertical-align:middle; font-size: 12px; font-family:Helvetica, Arial, sans-serif;  color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;"&gt;
        &lt;span class=""&gt;Product(s) Ready for Pickup&lt;/span&gt;
        &lt;span class="text-right"&gt;Quantity&lt;/span&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please help me with the proper setup of the html as well the bootstrap classes so as to achieve the expected result.
  Thanks!</p>