CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4
Jestino Sam
Jestino Sam

Reputation: 602

Bootstrap4 - Changing Div order for mobile

I am currently working on a mobile version of an HTML layout & I am trying to change the div order of the divs for mobile version. Below is the setup(order of div) for desktop version: enter image description here

I am expecting the below order of divs for the mobile version: enter image description here

Below is the code that I have tried out. The div#4 in the above image doesn't go below & div#5 doesn't come up. Can anyone point out what am I missing here & why the code isn't working? Your Account 

<div id="logo" class="row">
  <div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;">
    LOGO
  </div>
</div>
<!-- /.logo -->

<div id="order-text" class="row">
  <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;">
    <span style="align-self: center;">Heading Text</span>
  </div>
</div>
<!-- /.order-text -->

<div class="row">
  <div id="left-side-text" class="col-md-8 col-sm-12" style=" line-height: 18px;">
    <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;">
      Dear XYZ,
    </span>
    <br>
    <br>
    <span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left;  padding-bottom:20px;">Good news! Your order is confirmed.</span>
    <br>
    <br>
    <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;">
      Some other text
    </span>
  </div>
  <!-- /.left-side text -->

  <div id="order-information" class="col-md-4 col-sm-12 order-2">
    <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;">
      Order Details
    </div>
    <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;">
      <table>
        <tr>
          <td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0">Order Date:</td>
          <td class="col-2" style="padding-bottom: 10px; padding-left: 0">03/06/2016</td>
        </tr>
        <tr>
          <td class="col-2  font-weight-bold" style="padding: 0px;">Order #:</td>
          <td class="col-2" style="padding-bottom: 10px; padding-left: 0">123456789</td>
        </tr>
      </table>
    </div>
  </div>
  <!-- /.order-information -->
</div>

<div id="confirmation-email" class="row order-1">
  <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;">
    <br>
    <br>Text1
    <br>
    <br> Text
    <br> Text
  </div>
</div>

Upvotes: 1

Views: 813

Answers (1)

Zahidul Islam Ruhel
Zahidul Islam Ruhel

Reputation: 1134

I found a solution for you: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>

<body><div id="logo" class="row">
    <div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;">
        LOGO
    </div>
</div>
<!-- /.logo -->
<div id="order-text" class="row">
    <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;">
        <span style="align-self: center;">Heading Text</span>
    </div>
</div>
<!-- /.order-text -->
<div class="row">
    <div id="left-side-text" class=" col-md-8" style=" line-height: 18px;">
        <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;">
      Dear XYZ,
    </span>
        <br>
        <br>
        <span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left;  padding-bottom:20px;">Good news! Your order is confirmed.</span>
        <br>
        <br>
        <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;">
      Some other text
    </span>
    </div>
    <!-- /.left-side text -->
    <div id="order-information" class=" col-md-4 order-sm-6 order-md-3">
        <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;">
            Order Details
        </div>
        <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;">
            <table>
                <tr>
                    <td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0">Order Date:</td>
                    <td class="col-2" style="padding-bottom: 10px; padding-left: 0">03/06/2016</td>
                </tr>
                <tr>
                    <td class="col-2  font-weight-bold" style="padding: 0px;">Order #:</td>
                    <td class="col-2" style="padding-bottom: 10px; padding-left: 0">123456789</td>
                </tr>
            </table>
        </div>
    </div>
    <!-- /.order-information -->
    <div class="col-md-12 order-sm-3 order-md-6" 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;">
        <br>
        <br>Text1
        <br>
        <br> Text
        <br> Text
    </div>
</div></body>

</html>

Here is preview code: https://codepen.io/ziruhel/pen/qVNdBP

Upvotes: 1

Related Questions