Mobile help with bootstrap on code snippet

HI, Please see: http [colon]//dev2.magickitchen.com/menu/meal_packages/7622.html

I like the way it looks on desktop and tablet. But I'm hainvg a little trouble making this section look right on mobile, see screenshot and snippet attached.

Thanks.
mk-sku-cell-grande.txt
Capture.JPG
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.

Julian HansenCommented:
First up I would ditch the containing <div class="col-lg-12 ..."> - not necessary
So,
<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <div class="col-lg-6 col-md-4 col-xs-5"><MIM>SKU_header1</MIM> Svg </div>
    <div class="col-lg-2 col-md-3 col-xs-3">$<MIM>SKU_price</MIM></div>
    <div class="col-lg-2 col-md-3 col-xs-2"><input name="qty" size="2" maxlength="6" value="1" type="text"></div>
    <div class="col-lg-1 col-md-2 col-xs-2"><input type='image' alt="submit" name="submit" src="/images/add-1.gif"></div>
  </div>
</div>

Open in new window

Becomes
<div class="row">
  <div class="col-lg-6 col-md-4 col-xs-5"><MIM>SKU_header1</MIM> Svg </div>
  <div class="col-lg-2 col-md-3 col-xs-3">$<MIM>SKU_price</MIM></div>
  <div class="col-lg-2 col-md-3 col-xs-2"><input name="qty" size="2" maxlength="6" value="1" type="text"></div>
  <div class="col-lg-1 col-md-2 col-xs-2"><input type='image' alt="submit" name="submit" src="/images/add-1.gif"></div>
</div>

Open in new window

Then I would make the Add button change to a + and give it only 1 column and expand the description to 6 so
<div class="row">
  <div class="col-lg-6 col-md-4 col-xs-6"><MIM>SKU_header1</MIM> Svg </div>
  <div class="col-lg-2 col-md-3 col-xs-3">$<MIM>SKU_price</MIM></div>
  <div class="col-lg-2 col-md-3 col-xs-2"><input name="qty" size="2" maxlength="6" value="1" type="text"></div>
  <div class="col-lg-1 col-md-2 col-xs-1"><input type='image' alt="submit" name="submit" src="/images/add-1.gif"></div>
</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
Melody ScottAuthor Commented:
Thanks, much appreciated! I'll give this a try.
Melody ScottAuthor Commented:
It seems to look good everywhere but here: http://mobt.me/Awke  on a very small phone.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
Using FF Responsive View - looks Down to around 310px.

My guess is that there are a lot of sites out there that are going to look pretty bad on small devices.

Do you have any statistics on device screen size for your users?

This article (almost a year old now) http://www.marketingprofs.com/charts/2014/25740/mobile-trends-most-popular-phones-screen-sizes-and-resolutions  shows that devices 320px are a very small proportion of the market - and your site seems to be ok at 320 (using FF Responsive View)

Might be looking at the 80/20 rule here - too much effort to cater for such a small (shrinking) % of the market
Melody ScottAuthor Commented:
Sounds like good advice, thanks!
Melody ScottAuthor Commented:
The top ten phones that have accessed our site this year:
Apple iPad
Apple iPhone
Samsung SM-G900V Galaxy S5
Samsung SM-G900A Galaxy S5
Amazon KFTT Kindle Fire HD 7
Amazon Kindle Fire HDX 7
Microsoft Windows RT Tablet
Samsung SCH-I545 Galaxy S IV
Samsung SM-G900P Galaxy S5
Amazon KFJWI Kindle Fire HD 8.9

Good advice indeed! Thanks again.
Julian HansenCommented:
You are welcome - good luck with your project.
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.