I'm trying to set up a menu with categories like this: enter image description here
However, my result ends up looking like this: enter image description here
The description section keeps stacking on top of the photo section; it's strange because when I copied the code from the training materials, it worked perfectly. Am I missing something here?
Here's the code:
<div id="main-content" class="container">
<section class="row">
<div class="menu-item-tile col-md-6">
<div class="row">
<div class="col-sm-5">
<div class="menu-item-photo">
<div>D01</div>
<img class="img-responsive" width="250" height="150" src="images/menu/B/B-1.jpg" alt="Item">
</div>
<div class="menu-item-price">$10.95<span> (pint)</span> $14.95 <span>(quart)</span></div>
</div>
<div class="menu-item-description col-sm-7">
<h3 class="menu-item-title">Veal with Mixed Vegetables</h3>
<p class="menu-item-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.</p>
<!--no matter the screen size changing, the ratio of photo remain col-sm-5 and description remain on col-sm-7-->
</div>
</div>
<hr class="visible-xs">
</div>