Boostrap change position of div in mobile

http://dev2.magickitchen.com/checkoutv2.html

Hi, On this page, I think it would be better if the position of the divs in mobile were:
purchaser-receiver-payment information-order review-gift message.

Currently they are:
purchaser-payment information-receiver-order review-gift message.

I'm not sure how to make that change on mobile without changing it on desktop and tablet, too. Help? Thanks!
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Apparently, checkout requires a login.
Melody ScottAuthor Commented:
Oh, I apologize! I'll take that off.
Melody ScottAuthor Commented:
Ok, try again now, please.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Tom BeckCommented:
You have the page divided into two columns. Further, you have the Order Review nested inside the Receiver column. Those will never stack in the order you want for mobile with that nesting.

Assuming you wanted to get into this:

First, you will have to modularize Order Review and get it into a container that is on the same level as the other sections in the hierarchy.

Then you would need to get all sections into one full width column.

Arrange each section in the markup in the order you want them to appear, left to right, top to bottom:

purchaser
receiver
payment information
order review
gift message

Then, for each section you specify class col-lg-6 col-md-6 col-sm-12 so that they would stack two across for large and medium screens and one on top of the other for mobile screens.

Finally, you will have to add the content in each section to get the same look you have now.
Melody ScottAuthor Commented:
Ok, thanks. I will start work on that soon.
Tom BeckCommented:
Do a mockup like this before changing what you have. It will reveal potential problems. I have calculated the rendered heights of each section from the link you provided. Notice that when a section on the right column is taller than the one on the left, a gap is formed in the left column. Decide how you will handle this.

Mock up:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
div { border:1px solid red; font-size:1.2em }
</style>
</head>

<body>
<div class="container" style="max-width:900px">
<div class="row" style="border:none">
<div id="purchaser" style="height:638px" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">Purchaser</div>
<div id="receiver" style="height:704px" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">Receiver</div>
<div id="payment" style="height:304px" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">Payment Information</div>
<div id="orderReview" style="height:332px" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">Order Review</div>
<div id="giftMessage" style="height:80px" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">Gift Message</div>
</div>
</div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
Thank you.
Melody ScottAuthor Commented:
That's going to be incredibly helpful, thanks again,
Tom BeckCommented:
You're welcome.

Bootstrap note (maybe you know this already): Some of the classes in my mockup are unnecessary. I just include all sizes when testing so I can play with layouts. You only need to indicate when you want the layout to change. In other words, this...

col-lg-6 col-md-6 col-sm-6 col-xs-12

...has the same affect as this:

col-sm-6 col-xs-12

Classes for viewports bigger than sm are implied.
Melody ScottAuthor Commented:
Thanks, I did know that, not that I would necessarily have changed anything without you mentioning it. :)
Melody ScottAuthor Commented:
Hi, I reached this part: First, you will have to modularize Order Review. I'm not sure what you mean. Thanks. I'm coming along: http://dev2.magickitchen.com/checkoutv3.html

I may need help with a media query to make the heights of the divs shorter on larger screens, but I can open a new question for that if need be.
Tom BeckCommented:
By modularize Order Review I mean that the markup for the Review section should be separated from the Receiver section so you can move it independently. I see from the link that you have already done that.

You don't really need media queries to adjust the div heights. You should remove the inline style heights from your markup too. The layout will just flow as in the mockup. If the gaps are objectionable make adjustments to the content to even things out. Maybe adjust padding between form elements or at the top or bottom.
Melody ScottAuthor Commented:
ok, thanks, again much appreciated!
Melody ScottAuthor Commented:
All right.. all done, and only two things bother me: http://dev2.magickitchen.com/checkoutv4.html

1. Above the gift text box at the bottom,  Please do not send a catalog!   and its checkbox aren't in line with the words  It's a gift?    Fill out a free gift card!

2. On desktop I see authorize.net, Rapid SSL and 100% safe shopping icons. But on mobile I don't.

Thanks in advance for your help!
Tom BeckCommented:
1.) The div that holds the "Please do not send a catalog!" checkbox, add a line height of 45px.
<div style="height:53px;line-height:45px" class="pull-right">

2.) The authorize.net, Rapid SSL and 100% safe shopping icons are in a table. Tables and responsive design are generally incompatible. The icons are on the page in mobile, they are off to the right. You have to drag across to see them. I would change that table to block elements, a set of divs or an unordered list so it's part of the normal flow with everything else.

Also, consider adding max-width:300px and margin:0 auto to .form-control so the inputs are not absurdly wide on iPad size devices. This change may trigger additional adjustments to recenter some form elements.

.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 12px;
    height: 24px;
    line-height: 1.42857;
    margin: 0 auto;
    max-width: 300px;
    padding: 2px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
Melody ScottAuthor Commented:
Thanks again!
Melody ScottAuthor Commented:
Hi,

1. I can't find that 45px line height, but I added line-height:14px to the div inline, and it doesn't seem to help. So I stacked them instead. I can live with it.

2. Adding that max-width to the stylesheet makes my final comment area very small. I can't seem to override it on that form element. So I took away pull-left and pull-right on the gift card and no catalog divs, they are stacked above the gift message box. Again, I can live with that.

3. I removed the table around authorize.net seal and the others.  Then I put authorize.net on a separate 12-col line, because the js included screws up our CSS. Looks ok.

What do you think?
Tom BeckCommented:
1. Still messed up at iPad size screens. The Gift line is aligned left and the "Please do not send.." line aligns center so they do not stack one over the other. "Payment Information" section does not align the same as the other sections.

2. The only way to over ride a max-width is with another max-width. Set max-width:100% for the <textarea> of the comment box.

3. I cannot imagine why the js would not work unless authorize.net is on a separate line. I think they would look better on the same line. I would probably use a <ul> for those three items.
<ul class="col-xs-12" style="list-style:none;text-align:center">
            <li style="display:inline-block">
         <!-- Authorize.net Seal -->
                    <div class="AuthorizeNetSeal"> 
                      <script type="text/javascript" language="javascript">var ANS_customer_id="d7223767-ccf7-454b-822f-2194306bde79";</script> 
                      <script type="text/javascript" language="javascript" src="http://dev2.magickitchen.com/Shopping%20Cart_files/seal.js"></script>

                      <a href="https://verify.authorize.net/anetseal/?pid=d7223767-ccf7-454b-822f-2194306bde79&amp;rurl=file%3A///C%3A/Users/Faisal/Downloads/Shopping_Cart_files/Shopping%2520Cart.htm" onmouseover="window.status='http://www.authorize.net/'; return true;" onmouseout="window.status=''; return true;" onclick="window.open('https://verify.authorize.net/anetseal/?pid=d7223767-ccf7-454b-822f-2194306bde79&amp;rurl=file%3A///C%3A/Users/Faisal/Downloads/Shopping_Cart_files/Shopping%2520Cart.htm','AuthorizeNetVerification','width=600,height=430,dependent=yes,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,directories=no,location=yes'); return false;" target="_blank"> <img width="90" border="0" height="72" src="https://verify.authorize.net/anetseal/images/secure90x72.gif" alt="Authorize.Net Merchant - Click to Verify"> </a>
          
                    </div>
                    <!--end Authorize.net--></li>
                <li style="display:inline-block">   <!-- Here we include whatever logo was provided with the given SSL certificate: Default rapidssl logo --> 
                    <img src="http://dev2.magickitchen.com/CUSTOM/img/rapidssl_ssl_certificate.gif"> 
                    <!-- ===== ABCDE ===== TEMPLATE BEGIN:  /home/mkitchen/www/www.magickitchen.com/cart/template/admin/ssl_certs_trust_logo.tmpl ======= --> 
                   
                         
                          <!-- ==================   END SSL issuer trust logo ============================== -->
                          
                    </li><li style="display:inline-block">      
                        
                            <!-- Here we add the standard site popup: why this site is secure --> 
                            <!-- ==============================  Credit Card SAFETY popup BEGIN ============================================ -->
                       <div id="ccSecurity" style="margin-left: 15px;  padding: 5px; padding-top: 3px;"> <a href="#" title="" rel="/cgi/checkout_cc_safety.html"><img border="0" src="http://dev2.magickitchen.com/CUSTOM/img/100pct_safe_shopping_logo.jpg"></a> </div>
                            <!-- ==============================  Credit Card SAFETY popup END ============================================ --> 
                     
                    <!-- ===== ABCDE ===== TEMPLATE END:    /home/mkitchen/www/www.magickitchen.com/cart/template/admin/ssl_certs_trust_logo.tmpl ======= --> 
                    </li></ul>

Open in new window

I was hoping to find the time over the weekend to create my own version of this form layout but could not find the time. I think there are some cosmetic things you can do to divide it into sections for a better presentation. Some horizontal bands of a color or something to separate the form elements from the other stuff like the authorize.net row of emblems.
Melody ScottAuthor Commented:
I appreciate your help more than I can say. I'll try your changes.  The js on authorize.net seems to force it to the left.
Melody ScottAuthor Commented:
Oh, that's a beautiful thing!  I think it looks good now, http://dev2.magickitchen.com/checkoutv6.html
Tom BeckCommented:
Looks much better.

Still that problem with the Payment Information section aligning left while Purchaser and Receiver sections align center. This only happens on iPad sized devices so it's not a big deal but I wonder if you've noticed it.
Alignment problem
Melody ScottAuthor Commented:
I hadn't, I'll have a look. I'd better close this question, thanks again for all the help and advice. I'll probably be back with the cart page. ;)
Melody ScottAuthor Commented:
I'll accept this answer, as the beginning of all the great answers. Thanks again!
Tom BeckCommented:
You're welcome. Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.