Boostrap change position of div in mobile

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!
Who is Participating?
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.
mel200Author Commented:
Oh, I apologize! I'll take that off.
mel200Author Commented:
Ok, try again now, please.
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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:

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.
mel200Author 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>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
div { border:1px solid red; font-size:1.2em }

<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>

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
mel200Author Commented:
Thank you.
mel200Author 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.
mel200Author Commented:
Thanks, I did know that, not that I would necessarily have changed anything without you mentioning it. :)
mel200Author 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:

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.
mel200Author Commented:
ok, thanks, again much appreciated!
mel200Author Commented:
All right.. all done, and only two things bother me:

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, 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, 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%;
mel200Author Commented:
Thanks again!
mel200Author Commented:

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 seal and the others.  Then I put 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 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">
         <!-- 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=""></script>

                      <a href=";rurl=file%3A///C%3A/Users/Faisal/Downloads/Shopping_Cart_files/Shopping%2520Cart.htm" onmouseover="window.status=''; return true;" onmouseout="window.status=''; return true;" onclick="';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="" alt="Authorize.Net Merchant - Click to Verify"> </a>
                <li style="display:inline-block">   <!-- Here we include whatever logo was provided with the given SSL certificate: Default rapidssl logo --> 
                    <img src=""> 
                    <!-- ===== ABCDE ===== TEMPLATE BEGIN:  /home/mkitchen/www/ ======= --> 
                          <!-- ==================   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=""></a> </div>
                            <!-- ==============================  Credit Card SAFETY popup END ============================================ --> 
                    <!-- ===== ABCDE ===== TEMPLATE END:    /home/mkitchen/www/ ======= --> 

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 row of emblems.
mel200Author Commented:
I appreciate your help more than I can say. I'll try your changes.  The js on seems to force it to the left.
mel200Author Commented:
Oh, that's a beautiful thing!  I think it looks good now,
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
mel200Author 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. ;)
mel200Author 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

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.