I would think that at perhaps 480px would be a better breakpoint for that rule.
I would also use this:
@media screen and (max-width: 480px) {
}
Rather than the shortened version you were using as I have seen some browsers fail with it (especially those that need polyfills with media-queries.js or respond.js).
You can use it but slightly older browsers will have no support so you have to use it wisely and check that without flexbox the content still displays in some sort of order. Or use something like modernizr and offer different versions depending on support.
Flex box solves some layout problems but there is no need to use it for everything as it will probably make it harder to maintain in the long run. Just use it when you need that flex behavior. You can create fully responsive sites without ever needing flexbox. Flexbox is just a useful addition to the toolbox.
I don’t use it yet unless its for an effect that can’t be done any other way or if its not important to the structure of the page.
Posting since I’m tired of scrolling - http://www.skinwhitening101-intl.com/
You give that yellowish color as a color background to “#home_page_products ul li img”, however those images are only 300px wide and your columns are 303.
That demo was just to showcase he could get elastic videos by using iframes. Don’t follow that demo. Use the HTML5 video tag. Google examples. But yes remove everything you just did.
Start by removing <div class="wrapper_main layout_box"> (or cancelling its effect in mobile with width:100%) : it reduces the available width on mobile, and full-width is all the rage nowadays anyway. Then make the top background more compatible with the hamburger. Then make adjustments to the desktop view.