I am having a problem with ordering some elements for desktop and mobile versions. Please see the attached image for clarification-
Here is the design for desktop-
And, this is the design needed for mobile where the order of the elements have changed-
How can I achieve the changed result for the mobile version with Flexbox? I got it working with the CSS grid. But, for some reason, this is not working for iPhone X.
You might have to use media queries with flexbox to achieve the same effect.
You could put the list, price and button in a flex container, then set it to wrap rows. Then on desktop set the list’s flex to 1 1 100% to push the price to the next row of the flex container. Then on mobile reset the list’s flex property and set the button’s flex to 1 1 100%. You might also need to set the list’s right margin to auto to push the price to the right.
Thank you very much! It is working. I didn’t get the concept of flex-basis before it! Really helped me. I was struggling with this for last couple of days. And, also thanks for the suggestion of margin-right.
Working like a charm.
Here is a basic implementation in Codepen. It may help someone- https://codepen.io/AnowerJahan/pen/JjoPeLB