S’mores Bars

Recipe and photo by I Heart Nap Time

This is a demo of using the CSS flexbox order property for moving a photo out of the normal HTML flow. On narrow screens, such as you would see on mobile devices, the photo moves up over the title of the recipe—scrunch down your browser and check it out! Flexbox is only used on narrow screens because it has much better support among mobile browsers than desktop browsers. Even if a mobile browser doesn't support it, the reordering here is simply a visual effect, in the spirit of progressive enhancement, so it's not a problem if some mobile users don't see the photo at the top.



  1. Pre-heat oven to 325 degrees.
  2. Combine melted butter and graham cracker crumbs into a small bowl with a fork. Then line a 13x9 with foil and press down crust. Set aside.
  3. Cream butter and sugar in a large bowl. Add in eggs and vanilla and stir until combined. Mix the baking powder and salt with 1 cup of flour. Pour into the butter mixture and stir in the rest of the flour. Fold in chocolate chips.
  4. Press dough into pan with a spatula flour on your hands. The dough goes right on top of the crust. Bake for 30-35 minutes or until lightly browned. Oven temps will vary. Test with a tooth pick. The dough should be soft in the center.
  5. Allow bars to cool and then enjoy with a scoop of ice cream or cold glass of milk!