Client wants mobile page to stack differently

Hi, Please see: http colon//dev2.magickitchen.com/menu slash polska.html

The client wants the photo and the text to be on the left, with the quantity, price and add to cart button on the right when seen on a mobile.  I'm not sure that can be done, it wants to stack, but I'd love some advice on how to make it happen.

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:
??
Photo and text ARE on the left.
Quantity, price and Add to Cart ARE on the right.
??
Melody ScottAuthor Commented:
Right.. sorry. She wants it to appear as one unit: It would be nice if the images would be to the left of the text and each offering was all together as a unit, right now you have so much placed vertically and then one line to the right
Melody ScottAuthor Commented:
I think she wants it to look more like this:

across
Which would make the text tiny. I've checked with her that this is what she wants.
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:
On mobile? Not a chance!

Does your client care about search engine optimization? With Google's new rules, sites that are not mobile friendly will be penalized (in terms of results ranking) if they are not mobile friendly. A layout like that would definitely be mobile unfriendly. Anytime the mobile user has to scroll sideways to read the content, Google will flag it as mobile unfriendly.

This is a mockup what each item should look like on mobile to be mobile friendly.
Mobile friendly item layoutAchieving this would require some work and maybe some javascript. For example, you currently have this for the text area of each item.

<div class="col-lg-6 col-md-7 col-sm-12 col-xs-8 vSmall">

To match my mockup, xs screen size would need to go from col-xs-8 to col-xs-12 to get it full width like my mockup. Same goes for the image container and price containers. The images themselves should be larger so they fill the top. For the mockup I made them width:150%.

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!
Melody ScottAuthor Commented:
Seems to work, we'll see how she likes it! Thanks.
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
Web Development

From novice to tech pro — start learning today.